百木园1.图像绘制
在canvas中渲染图片，使用“drawImage()”方法。
drawImage()方法有三种形态：基础引入、图片缩放、切片。
⑴ 基础引入
语法：ctx.drawImage(img,x,y);
说明：参数img是一个image或canvas对象，（x,y）是图像左上角的坐标。
⑵ 图片缩放
语法：ctx.drawImage(img,x,y,width,height);
说明：在形态⑴的基础上增加了“width”和“height”两个参数，用于设置图像
缩放后的宽度和高度。
⑶ 切片
语法：ctx.drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
说明：该种形态下，第一参数img与之前形态的意义相同，后面8个参数中，前4个参数
用于指定图像源的切片位置和大小，后4个参数用于设置切片后的目标显示位置
和大小。
⑷ 代码示例
<body>
<canvas id=\"canvasImage\" width=\"1500\" height=\"800\"></canvas>
<script>
var canvas=document.getElementById(\'canvasImage\');
var ctx=canvas.getContext(\'2d\');
// 创建图片对象
var img=new Image();
img.src=\'../Images/rotation01.jpg\';
// 创建图片加载事件
img.onload=function () {
ctx.drawImage(img,10,10); //图片基础引入
ctx.drawImage(img,560,10,200,320); //图像缩放
ctx.drawImage(img,80,120,300,315,780,10,200,208); //切片处理
}
</script>
</body>
来源：https://www.cnblogs.com/husa/p/14576926.html
图文来源于网络，如有侵权请联系删除。