画布动画作为 div 背景 - EaselJS

Posted 2023-03-05

【中文标题】画布动画作为 div 背景 - EaselJS

【英文标题】：Canvas animation as div background - EaselJS

【发布时间】：2016-10-01 02:21:53

【问题描述】：

首先，对不起我的英语不好^^

我正在开发我的网站，我想将我的画布动画（使用 easelJS 框架创建）放在我的 div 背景中。

我试过这样的：

.canvas-bg 
    background: -webkit-canvas(animation);
 

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

它可以在 safari 上运行（但是当我刷新页面时动画会暂停）并且在 chrome 上根本无法运行......

那么，您有什么方法可以将动画画布作为 div 背景？ 比如这个网站的蓝色横幅：http://www.createjs.com/easeljs

非常感谢！ 朱利安。

【问题讨论】：

-webkit-canvas 和 getCSSCanvasContext 是非标准功能，已从除 Safari 之外的所有内容中删除。这就是它不起作用的原因。

好的，谢谢。另一种解决方案？

【参考方案1】：

您可以在 DIV 中包含画布，然后将其位置设置为绝对位置。 DIV 中的其他内容将位于顶部。

#canvas 
  position: absolute;
  display: inline;

这是一个简单的示例： http://jsfiddle.net/obcv1rex/1/

您可以将文本添加到第一个 DIV 以查看它的滚动。我将大小设置为 1000x1000，但为了使其更具动态性，您需要使用 javascript 调整画布大小（使用 CSS 将缩放内容）。

【讨论】：

非常感谢！！！！！！ :D 我已经尝试过了，但没有魔术线“溢出：隐藏；”