数据可视化基础 - canvas基础篇（五）：绘制图片

内容整理承接：

《数据可视化基础 - canvas基础篇（四）：绘制文字》

2.6 绘制图片（drawImage） （重点）

2.6.1 基本绘制图片的方式

context.drawImage(img,x,y);

参数说明：x，y 绘制图片左上角的坐标，img是绘制图片的dom对象。

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);

参数说明：width为绘制图片的宽度，height为绘制图片的高度（如果指定宽高，最好成比例，不然图片会被拉伸）。

等比公式：toH = Height * toW / Width; //等比

    设置高 = 原高度 * 设置宽 / 原宽度;

2.6.3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数说明：sx,sy裁剪的左上角坐标，swidth：裁剪图片的高度。sheight:裁剪的高度（其他同上） 。

2.6.4 用 JavaScript 创建 img 对象

第一种方式：

var img = document.getElementById('imgId');

第二种方式：

var img = new Image();  //这个就是 img标签的dom对象
img.src = '/aicoder_vip_doc/images/arc.gif';
img.alt = '文本信息';
img.onload = function() {
   //图片加载完成后，执行此方法
};