绘制图片

使用drawImage绘制图像

有以下三种使用方法:

  1. context.drawImage(img,x,y)
  2. context.drawImage(img,x,y,width,height)
  3. context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
  • 第一参数img可以是一个Image()的实例,也可以是一个<img>的Dom元素。
  • sx, sy 必选,为绘制图像的顶点坐标。
  • sWidth, sHeight 可选,为图片缩放大小。
var img = new Image();   // 创建img元素
img.onload = function(){
  ctx.drawImage(img, 20, 20, 150, 100)
}
img.src = 'https://img.xiaoyulive.top/img/shortcut/096.jpg'; // 设置图片源地址

如果除img外有8个参数:

  • 前4个是定义图像源的切片位置和大小。
  • 后4个则是定义切片的目标显示位置和大小。

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress