画布动画作为div背景 - EaselJS

Question

首先，我很抱歉我的英语不好^^

我正在我的网站上工作，我想把我的画布动画（用easylJS框架创建）放在我的div背景中。

我试过这样的事情：

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

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

它适用于safari（但是当我刷新页面时动画暂停）并且在chrome上根本不工作...

那么，你有没有办法制作动画画布作为div背景？ 就像这个网站的蓝色横幅一样：http://www.createjs.com/easeljs

非常感谢！
于连。

Answer 1

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

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

以下是一个快速示例： http://jsfiddle.net/obcv1rex/1/

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