canvas的drawImage方法参数详解

比眉伴天荒 2021-07-24 21:30 648阅读 0赞

# 引言： #

canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

一旦获得了源图对象，我们就可以使用 `drawImage` 方法将它渲染到 canvas 里。

## drawImage 方法有三种形态： ##

drawImage(image, dx, dy) 在画布指定位置绘制原图  
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图  
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>image</td> 
   <td>规定要使用的图像、画布或视频</td> 
  </tr> 
  <tr> 
   <td>sx</td> 
   <td>可选。开始剪切图片的 x 坐标位置</td> 
  </tr> 
  <tr> 
   <td>sy</td> 
   <td>可选。开始剪切图片的 y 坐标位置</td> 
  </tr> 
  <tr> 
   <td>sw</td> 
   <td>可选。被剪切图像的宽度（就是裁剪之前的图片宽度，这里的宽度若小于图片的原宽。则图片多余部分被剪掉；若大于，则会以空白填充）</td> 
  </tr> 
  <tr> 
   <td>sh</td> 
   <td>可选。被剪切图像的高度（就是裁剪之前的图片高度）</td> 
  </tr> 
  <tr> 
   <td>dx</td> 
   <td>在画布上放置图像的 x 坐标位置</td> 
  </tr> 
  <tr> 
   <td>dy</td> 
   <td>在画布上放置图像的 y 坐标位置</td> 
  </tr> 
  <tr> 
   <td>dw</td> 
   <td>可选。要使用的图像的宽度（就是裁剪之后的图片高度，放大或者缩放）</td> 
  </tr> 
  <tr> 
   <td>dh</td> 
   <td>可选。要使用的图像的高度（就是裁剪之后的图片高度，放大或者缩放）</td> 
  </tr> 
 </tbody> 
</table>

# 看实例（源图片是120\*120的） #

### drawImage(image, dx, dy) 在画布指定位置绘制原图 ###

var canvas = document.getElementById("canvas");
    	canvas.width=240;
    	canvas.height=240;
    	var ctx=canvas.getContext("2d");
    	
    	var image = new Image();
    	image.src="./images/head.jpeg";
    	image.onload=function(){
    		ctx.drawImage(this,0,0);
    	}

### 效果如下 ###

![20210312150722784.png][]

可以看到图片没有做任何的处理，直接从0,0位置绘制出来

### drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图 ###

### 效果如下 ###

### ![20210312150952741.png][] ###

后面的两个参数，指定了绘制的长宽，这里都指定240，会把画布占满。

###   
 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分 ###

### 效果如下 ###

![20210312151144480.png][]

图片被截取了左上角一部分，然后还放大显示长宽120

[20210312150722784.png]: /images/20210724/88f0490e283646b5840f3d1540aef86a.png
[20210312150952741.png]: /images/20210724/ac350f047b5c4e4e85c0e3004fbd817a.png
[20210312151144480.png]: /images/20210724/3da709cfee774ac09548d4ac0d6d192b.png