html5 两个canvas重叠放在一个div里面，每个canvas各填充一张图片，代码怎么写？

1、首先素材准备，基本框架的建立。这里让一个有字的从左到右运动起来。

2、将素材引入网页，定义canvas标签，获取canvas的上下文。定义一个画的函数，使用canavs绘图API里面的drawImage来完成。

3、写一个更新的函数，因为我们要让他动起来，所以每时刻绘制的地方都不一样。注意：这里要用clearRect，这个函数，主要是为了清空画布。

4、写定时函数，每隔02秒就更新一次，重新绘制。

5、最后来看看最终的效果，就完成了。

画布

用canvas作画，首先，你需要有一块“画布”。如果你的书架里面没有画布，你可以买一卷回来放进去。当然，在网页里面我们不需要花钱买，直接写一个canvas即可，类似：

复制代码

代码如下:

<canvas id="cvs" width="800" height="600">你的浏览器不支持canvas</canvas>

其中标签里面的文字是给不支持canvas的浏览器看的，支持的永远看不到。

这个画布的特性有必要说一下，他有两个原生的属性，即width和height同时，因为他也是一个html元素，所以他也可以使用css来定义width和height，但是，千万要注意：他自身的宽高和通过css定义的宽高是不一样的！

我们用JS来改变Canvas的宽高，是这样的：

复制代码

代码如下:

canvaswidth= 400

canvasheight = 300

从词源可以看出

Canvas，麻布->画布->画油画的画板。

Panel 小块布->块版->面板、墙板、地板

Canvas，直接继承自Component组件，主要用于绘图，没有控件，更原始

Panel，继承自Container容器，主要用于镶嵌在其他控件里面当面板。

由于Java SE版的Canvas和Panel都继承自Component，共用Component的paint(Graphics g)

方式绘制自己的内容。由于使用同一个Graphic类，所以那些drawXXX都一致。

绘制的方式一样，2者的绘制速度就没大区别，

Canvas更适合画全屏的、没有控件的情形。像手机上JavaME就主要用Canvas

Panel适合嵌入到其他控件中使用。