Cet article présente principalement les exemples d'utilisation de la méthode drawImage() dans HTML5 Canvas API La méthode drawImage() est principalement utilisée pour redimensionner les images. Ou recadrage, l'article donne l'utilisation de ses coordonnées et paramètres associés, les amis dans le besoin peuvent s'y référer
drawImage() est une méthode très critique, elle peut introduire des images, des canevas, des vidéos et redimensionnez-le ou recadrez-le.
a trois formes d'expression :
Grammaire 1
context.drawImage(img,dx,dy);
Grammaire 2
context.drawImage(img,dx,dy,dw,dw);
Grammaire 3
JavaScript CodeCopier le contenu dans le presse-papier
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);
Jetons un coup d'œil à l'esquisse de coordonnées : 
PS : Ne définissez pas la largeur et la hauteur de
La version à trois paramètres est un formulaire standard et peut être utilisée pour charger des images, des toiles ou des vidéos ; la version à cinq paramètres peut non seulement charger des images, mais également redimensionner l'image à une largeur et une hauteur spécifiées ; la version peut également être recadrée en plus de la mise à l'échelle. Voir le tableau ci-dessous pour la signification de chaque paramètre.
| Paramètre | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| img |
| ||||||||||||||||||||
| sx | Facultatif. La position de coordonnée X à laquelle commencer le cisaillement. | ||||||||||||||||||||
| sy | Facultatif. La position de coordonnée y pour commencer le cisaillement. | ||||||||||||||||||||
| slargeur | Facultatif. La largeur de l'image recadrée. | ||||||||||||||||||||
| shauteur | Facultatif. La hauteur de l'image découpée. | ||||||||||||||||||||
| x | Placez la position de coordonnée x de l'image sur le canevas. | ||||||||||||||||||||
| y | Placez la position de coordonnée y de l'image sur le canevas. | ||||||||||||||||||||
| largeur | Facultatif. La largeur de l'image à utiliser. (Étirer ou réduire l'image) | ||||||||||||||||||||
| hauteur | La hauteur de l'image à utiliser. (Étirez ou réduisez l'image) |
JavaScript Code复制内容到剪贴板
<!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>
Résultat de l'exécution :
Créer un cadre photo : Ici, nous combinons
JavaScript Code复制内容到剪贴板
<!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>
Résultat du run :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
