以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。
目录：
导入图片的步骤：第 1 步：确定图像来源 第 2 步：使用 drawImage() 方法将图像绘制到 canvas 中
确定图片来源有4种方法:
Ⅰ 页面内的图像
Ⅱ 其它canvas元素
Ⅲ 用脚本创建一个新的 image 对象
Ⅳ 使用 data:url 方式引用图像
① 以创建一个新的image对象的方式来确定图像来源，导入图像
语句：
1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas> 2 <script> 3 draw(); 4 function draw(){ 5 var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); 6 //第 1 步，确定图像来源 7 var img = new Image(); //创建新的 Image 对象 8 //如果要解决图片预装载的问题，可以使用 onload 事件一边装载图像一边执行绘制图像的函数 9 img.onload = function(){ 10 //第 2 步，使用 drawImage() 方法将图像绘制到 canvas 中 11 ctx.drawImage(img, 0, 0); 12 } 13 img.src = ‘1.jpg‘; //设置图像路径 14 } 15 </script>
页面表现：
使用 drawImage() 方法能够绘制图像的某些部分，以及增加或减少图像的尺寸。用法如下：
语法1：在画布上定位图像
context.drawImage( img, x , y )
参数说明：img : 规定要使用的图像、画布或视频
x ：开始剪切的 x 坐标位置
y ：开始剪切的 y 坐标位置
语法2: 在画布上定位图像，并规定图像的宽度和高度
context.drawImage( img, x , y，width, height )
参数说明： width：要使用的图片的宽度
height：要使用的图片的高度
语法3：剪切图像，并在画布上定位被剪切的部分
context.drawImage( img, sx , sy，swidth, sheight, width, height )
参数说明： sx：开始剪切的 x 坐标的位置
sy ：开始剪切的 y 坐标的位置
width：被剪切图像的宽度
height：被剪切图像的高度
① 设置导入的图像放大显示，并仅仅显示头部位置
语句：
1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas> 2 <script> 3 draw(); 4 function draw(){ 5 var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); 6 var img = new Image(); 7 img.onload = function(){ 8 //context.drawImage( img, x , y，width, height ) 9 ctx.drawImage(img, -300, -40, 1000, 800); 10 } 11 img.src = ‘1.jpg‘; 12 } 13 </script>
页面表现：
语句：
1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas> 2 <script> 3 draw(); 4 function draw(){ 5 var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); 6 var img = new Image(); 7 img.onload = function(){ 8 //context.drawImage( img, sx , sy，swidth, sheight, width, height ) 9 ctx.drawImage(img, 0, 0, 230, 200, 20, 20, 400, 400); 10 } 11 img.src = ‘1.jpg‘; 12 } 13 </script>
页面表现：
4. 平铺图像
① 使用drawImage() 方法
语句：
1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas> 2 <script> 3 draw(); 4 function draw(){ 5 var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); 6 var img = new Image(); 7 img.src = "1.jpg"; 8 img.onload = function(){ 9 var scale = 5; //平铺比例 10 var n1 = img.width/scale; //缩小后图像宽度 11 var n2 = img.height/scale; //缩小后图像高度 12 var n3 = canvas.width/n1; //平铺横向个数 13 var n4 = canvas.height/n2; //平铺纵向个数 14 for( var i=0; i<n3; i++ ){ 15 for( var j=0; j<n4; j++ ){ 16 ctx.drawImage(img, i*n1, j*n2, n1, n2); 17 } 18 } 19 }; 20 } 21 </script>
页面表现：
② 指定图像文件之后，使用 createPattern() 方法创建填充样式，然后将该样式指定给图形上下文对象的 fillStyle 属性，最后填充画布。
语句：
1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas> 2 <script> 3 draw(); 4 function draw(){ 5 var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); 6 var img = new Image(); 7 img.src = "1.png"; 8 img.onload = function(){ 9 var ptrn = ctx.createPattern(img, ‘repeat‘); //创建填充样式，全方向平铺 10 ctx.fillStyle = ptrn; //创建填充样式 11 ctx.fillRect(0, 0, 500, 500); //填充画布 12 }; 13 } 14 </script>
页面表现：
【HTML5 绘图与动画】 使用图像 1.导入图像 2.缩放图像 3.裁切图像
原文：https://www.cnblogs.com/xiaoxuStudy/p/12229943.html