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

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

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

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

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

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

<script>

      var Person = function(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      var person = new Person()

    </script>

三、绘制小人行走的帧动画

<s<script>

        var Person = function(canvas){

          this.ctx = document.querySelector("canvas").getContext("2d")

          this.canvasWidth = this.ctx.canvas.width

          this.canvasHeight = this.ctx.canvas.height

          this.src = "image/04.png"

          this.init()

        }

        Person.prototype.init = function(){

          var that = this

          this.loadImage(function(image){

            // 获取图片的宽高

            that.imageWidth = image.width

            that.imageHeight = image.height

            // 获取单个小怪兽区域的宽高

            that.positionWidth = that.imageWidth / 4

            that.positionHeight = that.imageHeight / 4

            // 默认是从左上角显示的

            that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

            that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

            // 绘制图片

            that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

              that.y0, that.positionWidth, that.positionHeight)

            var index = 0

            setInterval(function(){

              that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

              index++

              that.ctx.drawImage(image, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,<br>that.positionWidth, that.positionHeight)

              if(index >= 3){

                index = 0

              }

            }, 100)

          })

        }

        Person.prototype.loadImage = function(callback){

          var image = new Image()

          // 图片加载完成后执行

          image.onload = function(){

            callback &&callback(image)

          }

          image.src = this.src

        }

        var person = new Person()

      </script>

四、绘制疾走的小怪兽

可以通过键盘上下左右键控制小人在画布中任意行走

nction(canvas){

        this.ctx = document.querySelector("canvas").getContext("2d")

        this.canvasWidth = this.ctx.canvas.width

        this.canvasHeight = this.ctx.canvas.height

        this.stepX = 0

        this.stepY = 0

        this.stepSize = 10

        this.index = 0

        this.direction = 0

        this.src = "image/04.png"

        this.init()

      }

      Person.prototype.init = function(){

        var that = this

        this.loadImage(function(image){

          // 获取图片的宽高

          that.imageWidth = image.width

          that.imageHeight = image.height

          // 获取单个小怪兽区域的宽高

          that.positionWidth = that.imageWidth / 4

          that.positionHeight = that.imageHeight / 4

          // 默认是从左上角显示的

          that.x0 = that.canvasWidth / 2 - that.positionWidth / 2

          that.y0 = that.canvasHeight / 2 - that.positionHeight / 2

          // 绘制图片

          that.ctx.drawImage(image, 0, 0, that.positionWidth, that.positionHeight, that.x0,

            that.y0, that.positionWidth, that.positionHeight)

          var index = 0

          document.onkeydown = function(e){

            that.ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight)

            switch(e.keyCode){

              case 37 :

                console.log('左')

                that.direction = 1

                that.stepX--

                that.showImage(image)

                break

              case 38 :

                console.log('上')

                that.direction = 3

                that.stepY--

                that.showImage(image)

                break

              case 39 :

                console.log('右')

                that.direction = 2

                that.stepX++

                that.showImage(image)

                break

              case 40 :

                console.log('下')

                that.direction = 0

                that.stepY++

                that.showImage(image)

                break

            }

          }

        })

      }

      Person.prototype.loadImage = function(callback){

        var image = new Image()

        // 图片加载完成后执行

        image.onload = function(){

          callback &&callback(image)

        }

        image.src = this.src

      }

      Person.prototype.showImage = function(image){

        this.index++

        console.log(this.index)

          this.ctx.drawImage(image, this.index * this.positionWidth, this.direction * this.positionHeight, this.positionWidth, this.positionHeight, this.x0 + this.stepX * this.stepSize, this.y0 + this.stepY * this.stepSize, this.positionWidth, this.positionHeight)

          if(this.index >= 3){

            this.index = 0

          }

      }

      var person = new Person()

    </script>

深圳网站建设www.sz886.com

注意使用canvas drawImage的时候需要图片加载完成  意思是 要在onload里使用 drawImage才行 .直接写肯定不对

img.onload = function() {

z.drawImage(img,0,0)

}

---