Maison > Article > interface Web > Comment dessiner des images dans un canevas HTML5
Comment dessiner des images dans un canevas HTML5
- 不言original
- 2018-12-01 17:30:154610parcourir
Canvas est un nouveau canevas en HTML5, alors comment le canevas HTML5 dessine-t-il des images ? Cet article vous présentera la méthode de dessin d'images sur un canevas HTML5. Jetons un coup d'œil au contenu spécifique.
Regardons d'abord directement l'exemple de code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';
}
</script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
<canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
<div>Canvas Demo</div>
</body>
</html>Explication : lorsqu'on dessine sur le canevas, il est courant d'obtenir le contexte du processus.
Préparez l'image à dessiner sur la toile. Créez un objet Image.
var img = new Image();
Dessinez une image sur le canevas en utilisant la méthode drawImage() du contexte Canvas. Les coordonnées X et Y sont données pour dessiner l'objet Image comme premier paramètre et l'image comme deuxième troisième paramètre. Le chargement de l'image de l'objet Image étant géré de manière asynchrone, il doit être prêt avant que l'image de l'objet Image ne soit prête. . Par conséquent, nous implémentons le traitement du dessin sur l'événement onload de l'objet Image, et enfin traitons les paramètres de l'image source
img.onload = function onImageLoad() {
context.drawImage(img, 128, 40);
}
img.src = 'img/flower.jpg';Le résultat en cours d'exécution
Ouvrez le fichier HTML dans un navigateur Internet. Le résultat est présenté ci-dessous, l'image est dessinée sur la toile.
Remarque : Dans le cas du code suivant, il n'y a aucune garantie que l'image de l'objet Image sera lue lors de l'exécution de drawImage. Cela peut donc se produire lors de l'affichage de l'image. Les images de dessin doivent être implémentées lors du chargement de l’objet Image.
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if (!canvas || !canvas.getContext) {
return false;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'img/flower.jpg';
context.drawImage(img, 128, 40);
}
</script>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!