Manuel de référence HTML

Tous les balises HTML

HTML: <template> balise

Méthode drawImage() pour HTML canvas

La méthode drawImage() fournit plusieurs méthodes pour dessiner des images sur le Canvas.

Manuel de référence pour HTML canvas

Image à utiliser :

Online Example

Dessiner une image sur le canevas :

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="200"style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload = function()
{
　　　　ctx.drawImage(img,10,10);
}
</script>
</body>
</html>

Vérifiez et voyez ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge drawImage() Méthode.

Attention :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode drawImage() dessine l'image, le canevas ou la vidéo sur le canevas.

La méthode drawImage() peut également dessiner une partie de l'image et/ou augmenter/Réduire la taille de l'image.

Syntaxe JavaScript

Localiser l'image sur le canevas :

Syntaxe JavaScript :	context.drawImage(img,x,y);

Localiser l'image sur le canevas et définir la largeur et la hauteur de l'image :

Syntaxe JavaScript :	context.drawImage(img,x,y,width,height);

Couper l'image et localiser la partie coupée sur le canevas :

Syntaxe JavaScript :	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valeur du paramètre

Paramètre	Description
img	Définir l'image, le canevas ou la vidéo à utiliser.
sx	Optionnel. Position x de début du découpage.
sy	Optionnel. Position y de début du découpage.
swidth	Optionnel. Largeur de l'image coupée.
sheight	Optionnel. Hauteur de l'image coupée.
x	Positionner l'abscisse x de l'image sur le canevas.
y	The y coordinate position of the image on the canvas.
width	Optional. The width of the image to use (stretches or shrinks the image).
height	Optional. The height of the image to use (stretches or shrinks the image).

Online Example

Position the image on the canvas, then specify the width and height of the image:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="250"height="300"style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload = function()
{
　　　　ctx.drawImage(img,10,10,150,180);
}
</script>
</body>
</html>

Vérifiez et voyez ‹/›

Online Example

Cut the image and position the cut part on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Image application:</p>
<img id="scream" src="views.png">
<p>Canvas:</p>
<canvas id="myCanvas" width="300"height="1500"style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
document.getElementById("scream").onload=function()
{
　　　　var　c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d);
　　　　var img=document.getElementById("scream");
　　　　ctx.drawImage(img,90,130,50,60,10,10,50,60);
};
</script>
</body>
</html>

Vérifiez et voyez ‹/›

Online Example

Video to use (press the play button to start the demonstration):

Canvas:

JavaScript (each 20 millisecond, the code will draw the current frame of the video):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas drawImage() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>Video to use:</p>
<video id="video1"controls width="270"autoplay>
　　　　<source src="movie.mp4"type='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg#39;>
　　　　<source src="movie.webm" type='video/webm#39;>
</video>
<p>Canvas (code is in each20 millisecond to draw the current video frame):</p>
<canvas id="myCanvas" width="270"height="135"style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge l'HTML5　canvas balise.
</canvas>
<script>
var　v=document.getElementById("video",1");
var　c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',　function()　
{
　　　　var　i=window.setInterval(function()　{ctx.drawImage(v,5,5,260,125)},20);
},false);
v.addEventListener('pause',function()　
{
　　　　window.clearInterval(i);
},false);
v.addEventListener('ended',function()　
{
　　　　clearInterval(i);
},false);　　
</script>
</body>
</html>

Vérifiez et voyez ‹/›

Manuel de référence pour HTML canvas

HTML: <template> balise