Home > Article > Web Front-end > Usage examples of drawImage (image scaling or cropping) in H5 Canvas API
This article mainly introduces the usage examples of the drawImage() method in the HTML5 Canvas API. The drawImage() method is mainly used to scale or crop images. The article gives the usage of its coordinates and related parameters. Friends who need it You can refer to the following
drawImage() is a very key method. It can introduce images, canvases, and videos, and scale or crop them.
There are three forms of expression:
Syntax 1
JavaScript CodeCopy content to the clipboard
context.drawImage(img,dx,dy);
Grammar 2
JavaScript Code Copy the content to the clipboard
Copy content to clipboard
##context.drawImage(img,sx,sy,sw,sh, dx,dy,dw,dh);
PS: Do not define 5ba626b379994d53f7acf72a64f9b697 in the style width and height, 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.
| Description | |
|---|---|
| sy | |
| swidth | |
| sheight | |
| x | |
| y | |
| width | |
| height | |
JavaScript Code
Copy content to clipboard
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>drawImage()</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<p id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
var img = new Image();
img.src = "./images/20-1.jpg";
img.onload = function(){
context.drawImage(img,200,50);
}
};
</script>
</body>
</html>
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 Code
Copy content to clipboard
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绘制心形相框</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<p id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</p>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.beginPath();
context.moveTo(400,260);
context.bezierCurveTo(450,220,450,300,400,315);
context.bezierCurveTo(350,300,350,220,400,260);
context.clip();
context.closePath();
var img = new Image();
img.src = "./images/20-1.jpg";
img.onload = function(){
context.drawImage(img,348,240,100,100);
}
};
</script>
</body>
</html>
Isn’t it beautiful? Okay, now that we have finished talking about the most critical masking and image cropping, in fact, drawImage() is also a crucial method in java.awt. Some people say that when making Java game interfaces, as long as you know how to use drawImage(), you can conquer the world with one move~ The same is true in Canvas. The materials provided by artists are basically pictures. At this time, drawImage() is very important for processing pictures. Even basic skills are the most important way to process pictures. 
The above is the detailed content of Usage examples of drawImage (image scaling or cropping) in H5 Canvas API. For more information, please follow other related articles on the PHP Chinese website!