Usage examples of drawImage() method in HTML5 Canvas API_html5 tutorial skills

drawImage() is a key method. It can introduce images, canvases, and videos, and scale or crop them.

There are three forms of expression:

Grammar 1

JavaScript CodeCopy content to clipboard

1. context.drawImage(img,dx,dy);

Grammar 2

JavaScript CodeCopy content to clipboard

1. context.drawImage(img,dx,dy,dw,dw);

Grammar 3

JavaScript CodeCopy content to clipboard

1. context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

Let’s take a look at the coordinate sketch:

PS: Do not define the width and height of in the style, otherwise, the picture drawn inside will be automatically enlarged or reduced.
The three-parameter version is a standard form and can be used to load images, canvases or videos; the five-parameter version can not only load images but also scale the image to a specified width and height; the nine-parameter version can also be cropped in addition to scaling. See the table below for the meaning of each parameter.

参数	描述
img
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	要使用的图像的高度。（伸展或缩小图像）

Next, let’s try loading an image.

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
9. "canvas-warp">
10. "canvas">
11. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </span> </li> <li class="alt"> <span> window.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"> <span> canvas.width = 800; </span> </li> <li> <span> canvas.height = 600; </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li> <span> context.fillStyle = </span><span class="string">"#FFF"</span><span>; </span> </li> <li class="alt"> <span> context.fillRect(0,0,800,600); </span> </li> <li> <span> </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> img = </span><span class="keyword">new</span><span> Image(); </span> </li> <li> <span> img.src = </span><span class="string">"./images/20-1.jpg"</span><span>; </span> </li> <li class="alt"> <span> img.onload = </span><span class="keyword">function</span><span>(){ </span> </li> <li> <span> context.drawImage(img,200,50); </span> </li> <li class="alt"><span>                                                               </span></li> }; <li> <span> </span> </li></script>

Run result:

Create a photo frame:
Here, we combine clip(), drawImage() and cubic Bezier curve bezierCurveTo() to add a heart-shaped photo frame to the above case~

JavaScript CodeCopy content to clipboard

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<script>   </span> </li> <li class="alt"> <span>    window.onload = </span><span class="keyword">function</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"> <span>        canvas.width = 800;   </span> </li> <li> <span>        canvas.height = 600;   </span> </li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillRect(0,0,800,600);   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>        context.beginPath();   </span> </li> <li> <span>        context.moveTo(400,260);   </span> </li> <li class="alt"> <span>        context.bezierCurveTo(450,220,450,300,400,315);   </span> </li> <li> <span>        context.bezierCurveTo(350,300,350,220,400,260);   </span> </li> <li class="alt"> <span>        context.clip();   </span> </li> <li> <span>        context.closePath();   </span> </li> <li class="alt"> <span>  </span> </li> <li> <span>        </span><span class="keyword">var</span><span> img = </span><span class="keyword">new</span><span> Image();   </span> </li> <li class="alt"> <span>        img.src = </span><span class="string">"./images/20-1.jpg"</span><span>;   </span> </li> <li> <span>        img.onload = </span><span class="keyword">function</span><span>(){   </span> </li> <li class="alt"> <span>            context.drawImage(img,348,240,100,100);   </span> </li> <li> <span>        }   </span> </li> <li class="alt"> <span>    };   </span> </li> <li> <span></script>   

  

  

运行结果：

是不是美美的？好啦，至此最关键的遮罩和图像裁剪以及说完了，其实在java.awt中，drawImage()也是一个至关重要的方法。有人说制作Java游戏界面，只要会用drawImage()就可以一招打遍天下~在Canvas里也是一样的。美工提供的素材基本都是图片，这个时候drawImage()对图片的处理就很重要了。即使基本功，也是对图片最重要的处理方法。