Canvas 动画作为 div 背景 - EaselJS

Question

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

我正在我的网站上工作，我想将我的 canvas 动画（使用 easelJS 框架创建）放在我的 div 背景中。

我试过这样的事情：

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

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

它在 safari 上工作（但当我刷新页面时动画暂停）并且在 chrome...

上根本不工作

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

非常感谢！
朱利安

Answer 1

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

#canvas {
  position: absolute;
  display: inline;
}

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

Canvas animation as div background - EaselJS