Maison > Article > interface Web > Partage d'exemples de code pour l'utilisation de la méthode drawImage() dans l'API HTML5 Canvas (image)

Partage d'exemples de code pour l'utilisation de la méthode drawImage() dans l'API HTML5 Canvas (image)

黄舟original: 2017-03-15 16:19:091270parcourir

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 :
Partage d'exemples de code pour l'utilisation de la méthode drawImage() dans l'API HTML5 Canvas (image)

PS : Ne définissez pas la largeur et la hauteur de 13b466976f1160ae84c4035b978a7db2 dans le style, sinon, la 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.

Paramètre

Description

img

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

Facultatif. La position de coordonnée X à laquelle commencer le cisaillement.

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.

Placez la position de coordonnée x de l'image sur le canevas.

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>

Ensuite, essayons de charger une image.

Partage d'exemples de code pour l'utilisation de la méthode drawImage() dans l'API HTML5 Canvas (image) Résultat de l'exécution :

Créer un cadre photo : Ici, nous combinons

clip

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>

() avec drawImage() et la courbe de Bézier cubique bezierCurveTo() pour ajouter un cœur au boîtier ci-dessus. Cadre photo en forme ~

Partage d'exemples de code pour l'utilisation de la méthode drawImage() dans l'API HTML5 Canvas (image) Résultat du run :

C'est pas beau ? D'accord, maintenant que nous avons fini de parler du masquage et du recadrage d'image les plus critiques, en fait, drawImage() est également une méthode cruciale dans java.awt. Certaines personnes disent que lors de la création d'interfaces de jeux Java, tant que vous savez utiliser drawImage(), vous pouvez conquérir le monde d'un seul geste ~ La même chose est vraie dans Canvas. Le matériel fourni par les artistes est essentiellement des images. À l'heure actuelle, drawImage() est très important pour le traitement des images. Même les compétences de base constituent le moyen le plus important de traiter des images.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 CanvasArticle suivant：Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas

Articles Liés

Voir plus