Exemples d'utilisation de la méthode drawImage() dans les compétences du didacticiel HTML5 Canvas API_html5

drawImage() est une méthode clé. Elle peut introduire des images, des toiles et des vidéos, et les redimensionner ou les recadrer.

Il existe trois formes d'expression :

Grammaire 1

Code JavaScriptCopier le contenu dans le presse-papiers

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

Grammaire 2

Code JavaScriptCopier le contenu dans le presse-papiers

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

Grammaire 3

Code JavaScriptCopier le contenu dans le presse-papiers

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

Jetons un coup d'œil au croquis des coordonnées :

PS : Ne définissez pas la largeur et la hauteur de dans le style, sinon l'image dessinée à l'intérieur sera automatiquement agrandie ou réduite.
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.

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

Ensuite, essayons de charger une image.

Code JavaScriptCopier le contenu dans le presse-papiers

2. "zh">
"UTF-8"> drawImage()
ête>
6. "toile-warp">
7. "toile"
8. > Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !

<script> </script>

window.onload =

fonction(){

var canvas = document.getElementById(

"canvas" ); toile.width = 800

toile.hauteur = 600 var context = canvas.getContext(

"2d"

); context.fillStyle =

"#FFF" context.fillRect(0,0,800,600);

var img =

nouveau Image();

img.src =

"./images/20-1.jpg" img.onload = fonction(){

context.drawImage(img,200,50);                                                              

};

Résultat de l'exécution :

Créer un cadre photo :
Ici, nous combinons clip(), drawImage() et la courbe de Bézier cubique bezierCurveTo() pour ajouter un cadre photo en forme de cœur au cas ci-dessus~

Code JavaScriptCopier le contenu dans le presse-papiers

1. nbsp;html>   
2. "zh">   
3.   
4.      "UTF-8">   
5.        
6.     
7.         body { background: url("./images/bg3.jpg") repeat; }  
8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
9.        
10.   
11.   
12. "canvas-warp">   
13.     "canvas">   
14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
15.        

  

  

<script>   </script>

    window.onload = fonction(){   

        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 = nouveau Image();   

        img.src = "./images/20-1.jpg";   

        img.onload = fonction(){   

            context.drawImage(img,348,240,100,100);   

        }   

    } ;