画布动画作为 div 背景 - EaselJS答案

【问题标题】：Canvas animation as div background - EaselJS画布动画作为 div 背景 - 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;
}

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

【讨论】：