怎么设置canvas动画为背景

使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下：每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形首先是绘制图形的方法，如下：<pre t="code" l="java">function myAnimation() {

ctx.clearRect(0, 0, canvas_size_x, canvas_size_y)

if (x_icon <0 || x_icon >canvas_size_x - size_x) {

stepX = -stepX

}

if (y_icon <0 || y_icon >canvas_size_y - size_y) {

stepY = -stepY

}

x_icon += stepX

y_icon += stepY

ctx.drawImage(anim_img, x_icon, y_icon)

}以上方法每隔一定时间清除画布内容，并且重新计算绘制图形位置，一旦超过了画布大小，则反转坐标绘制图形。

我知道有两个思路

一个是js画好画布后，js把背景图的地址变成画布的数据。比如canvas的id是HB， 画好后执行document.body.style.background = "url('"+HB.toDataURL()+"')"

另一个是你说的直接把其它元素层叠在画布上，只要画布足够大， canvas的style设成"position:absolutez-index:-1"应该就行了。

QQ登录界面的动态背景是通过使用 JavaScript 代码实现的。JavaScript 代码会动态地创建一系列的 HTML 元素，比如图片、文本、音频等，将他们放在 QQ 登录界面的背景中，做出一种视觉的效果。另外，鼠标移动到某些元素上，也会有不同的行为，比如翻转、改变图片等等，使得 QQ 登录界面看上去更有趣、活力。

---