在canvas画布中如何加载图片

<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中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。

不过，图片增加了canvas *** 作的复杂度：必须等到图片完全加载后才能对其进行 *** 作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。因此，开发人员要特别注意，在呈现之前，应确保图片已经加载完毕。

为保证在呈现之前图片已完全加载，我们提供了回调，即仅当图像加载完成时才执行后续代码，如代码清单如下所示。

?

<script type="text/javascript">

function drawBeauty(beauty){

var mycv = document.getElementById("cv")

var myctx = mycv.getContext("2d")

myctx.drawImage(beauty, 0, 0)

}

function load(){

var beauty = new Image()

beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"

if(beauty.complete){

drawBeauty(beauty)

}else{

beauty.onload = function(){

drawBeauty(beauty)

}

beauty.onerror = function(){

window.alert('美女加载失败，请重试')

}

}

}//load

if (document.all) {

window.attachEvent('onload', load)

}else {

window.addEventListener('load', load, false)

}

</script>

基本绘画

在最基本的画图 *** 作中，你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。

drawImage(image, x, y)

var canvas = document.getElementById(‘myCanvas’)

var ctx = canvas.getContext(’2d’)ctx.drawImage(myImage, 50, 50)

ctx.drawImage(myImage, 125, 125)

ctx.drawImage(myImage, 210, 210)

缩放及调整尺寸

改变图像的尺寸，你需要使用重载的drawImage函数，提供给它希望的宽度和高度参数。

drawImage(image, x, y, width, height)

var canvas = document.getElementById(‘myCanvas’)

var ctx = canvas.getContext(’2d’)ctx.drawImage(myImage, 50, 50, 100, 100)

ctx.drawImage(myImage, 125, 125, 200, 50)

ctx.drawImage(myImage, 210, 210, 500, 500)

图像裁剪

最后一个drawImage方法的功用是对图像进行裁剪。

drawImage(image,

sourceX,

sourceY,

sourceWidth,

sourceHeight,

destX,

destY,

destWidth,

destHeight)

参数很多，但基本上你可以把它想成从原图中取出一个矩形区域，然后把它画到画布上目标区域里。

---