玩转canvas之drawImage()与方法封装

drawImage()

方法讲解

drawImage方法总体并不是很难理解，这个方法总共有九个参数
drawImage(img, sx, sy, sw, sh, x, y, w, h)
img - 是传入的img对象（注意这里是图片对象，并且是已经加载完成的那种）
sx - 剪裁图片的起始x坐标
sy - 剪裁图片的起始y坐标
sw - 剪裁图片的宽度
sh - 剪裁图片的高度
x - 在画布中显示的x坐标
y - 在画布中显示的y坐标
w - 实际在画布中显示的宽度（有可能对图片宽进行拉伸缩放）
h - 实际在画布中显示的高度（有可能对图片高进行拉伸缩放）

实际原理

先从原图片的（sx，xy）截取宽为sx，高为sh的图片
然后在画布的（x，y）位置绘制宽为x，高为h的图片

关系图

代码封装

由于原方法中只能传入一个img对象，相对还是有局限性，所以我们对其进行拓展

增加传入图片的方法

拓展为使其可以是图片的url或者是img对象，若是url，则先等待加载完在绘制，否则直接渲染

drawImg(img, sx, sy, sw, sh, x, y, w, h){
  let ctx = this.ctx
  if(typeof img === 'string'){
    let i = new Image()
    i.src = img
    i.onload = function(){
      ctx.drawImage(i, sx, sy, sw, sh, x, y, w, h)
    }
  }else if(typeof img === 'object'){
    ctx.drawImage(img, sx, sy, sw, sh, x, y, w, h)
  }
  return this
}

示例

let ecav8 = new BasicCanvas(document.getElementById('image'))
let img = document.getElementById('img')
ecav8.drawImg(img,0,0,500,500,0,0,200,200)

优化参数设置

由于传入的参数过多导致使用不方便，我们需要对传入的参数做一些优化，使传入必要的参数即可生成图片

drawImg(img, sx = 0, sy = 0, sw = 0, sh = 0, x, y, w, h){
  let ctx = this.ctx
  if(!x){
    x = sx
    sx = 0
  }
  if(!y){
    y = sy
    sy = 0
  }
  if(!w){
    w = sw
  }
  if(!h){
    h = sh
  }
  if(typeof img === 'string'){
    let i = new Image()
    i.src = img
    i.onload = function(){
      ctx.drawImage(i, sx, sy, sw, sh, x, y, w, h)
    }
  }else if(typeof img === 'object'){
    ctx.drawImage(img, sx, sy, sw, sh, x, y, w, h)
  }
  return this
}

思路
首先给sx，sy，sw，sh设置默认值，当我们仅传入这个四个参数的时候，默认将sx，sy作为在画布上的（x，y）坐标，并将sx，sy赋值为0；并且将其剪裁宽高sw，sh赋值给实际宽高w，h

示例

let ecav8 = new BasicCanvas(document.getElementById('image'))
let img = document.getElementById('img')
ecav8.drawImg(img.src,10,10,200,200)

实际上drawImage()方法本身也有类似参数优化的机制，有兴趣的可以去动手试一下。

总结

这里主要是对其传入的参数进行了拓展以及优化，当然我们还是缺少了一些传参过程的报错机制，比如用户传递的不是img对象，也会导致绘制失败。后期会慢慢的完善