Canvas(十一) Canvas绘制图像

绘制图像 drawImage

• drawImage(image,dx,dy)

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  var img = new Image()
  img.src = 'xxx.jpg' //注意路径
  img.onload = function () {
    context.drawImage(img, 0, 0)
  }
}

• drawImage(image,dx,dy,dw,dh)

这样的缩放会全面铺开

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  var img = new Image()
  img.src = 'xxx.jpg' //注意路径
  img.onload = function () {
    context.drawImage(img, 0, 0, canvas.width, canvas.height)
  }
}

• drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

对原图像进行操作,我们希望把原图像 sx,sy,sw,sh 这些坐标渲染到画布 dx,dy,dw,dh 上

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  var img = new Image()
  img.src = 'xxx.jpg' //注意路径
  img.onload = function () {
    context.drawImage(img, 600, 200, 400, 400, 200, 200, 400, 400)
  }
}