Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas-Tutoriel H5-php.cn

Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas

黄舟

Libérer： 2017-03-15 16:17:01

original

1656 Les gens l'ont consulté

Cet article présente principalement un exemple de tutoriel d'utilisation de la méthode clip() dans HTML5 Canvas API pour recadrer une image de zone . Une attention particulière doit être accordée à la combinaison des méthodes save() et restaurer(). Les amis dans le besoin peuvent se référer à

Lorsque nous utilisons Canvas pour dessiner des images, nous souhaitons souvent ne conserver qu'une partie de l'image. C'est ainsi que nous pouvons utiliser la fonction de recadrage d'image fournie par l'API canevas pour concrétiser cette idée.
La fonction de recadrage d'image de l'API Canvas signifie qu'en utilisant un chemin dans le canevas, seule l'image de la zone contenue dans le chemin sera dessinée, et l'image en dehors du chemin ne sera pas dessinée. C'est un peu comme les masques de calque dans Flash.

Utilisez la méthode clip() sans paramètres du contexte graphique pour implémenter la fonction de recadrage d'image de Canvas. Cette méthode utilise un chemin pour définir une zone de découpage pour le canevas. Le chemin doit donc être créé en premier. Une fois la création terminée, appelez la méthode clip() pour définir la zone de recadrage.
Il est à noter que le recadrage est effectué sur la toile. La toile recadrée ne peut pas être restaurée à sa taille d'origine, ce qui signifie que la toile devient plus petite au fur et à mesure qu'elle est découpée afin de garantir qu'elle puisse toujours être à la taille initialement définie. par le canevas à la fin Dessin nécessite une attention particulière à save() et restaurer(). La toile est d'abord découpée avant d'être dessinée. Il n'est pas nécessaire que ce soit une image, le chemin peut également être inséré ~

Jetons d'abord un coup d'œil à une simple démo.

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.fillStyle = "black";   
        context.fillRect(10,10,200,200);   
        context.save();   
        context.beginPath();   
  
        //裁剪画布从(0，0)点至(50，50)的正方形   
        context.rect(0,0,50,50);   
        context.clip();   
  
        //红色圆   
        context.beginPath();   
        context.strokeStyle = "red";   
        context.lineWidth = 5;   
        context.arc(100,100,100,0,Math.PI * 2,false);   
        //整圆   
        context.stroke();   
        context.closePath();   
  
        context.restore();   
  
        //再次裁切整个画布   
        context.beginPath();   
        context.rect(0,0,500,500);   
        context.clip();   
  
        //绘制一个没有裁切的蓝线   
        context.beginPath();   
        context.strokeStyle = "blue";   
        context.lineWidth = 5;   
        context.arc(100,100,50,0,Math.PI * 2,false);   
        //整圆   
        context.stroke();   
        context.closePath();   
    };   
</script>   
</body>   
</html>

Copier après la connexion

Résultat de l'exécution :
Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas

En utilisant un mélange de méthodes save() et restaurer(), nous pouvons limiter la zone de dessin. Tout d’abord, nous pouvons utiliser la méthode rect() pour entourer une zone que nous voulons dessiner, puis utiliser la méthode clip() pour recadrer la zone.

De cette façon, quelles que soient les opérations que nous effectuons dans le contexte, seule la partie limitée sera affichée. En d’autres termes, la fonction de clip() est de limiter la zone à afficher. Lorsque nous ne voulons plus limiter la zone, nous pouvons utiliser la méthode restaurer() pour sortir et continuer à exploiter le contexte d'origine.
Regardez à nouveau ce recadrage :
Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas

JavaScript Code复制内容到剪贴板
function drawScreen() {   
        var x = canvas.width / 2;   
        var y = canvas.height / 2;   
        var radius = 75;   
        var offset = 50;   
  
        //裁剪的区域为 (x, y)为中心半径为75的圆   
        context.save();   
        context.beginPath();   
        context.arc(x, y, radius, 0, 2 * Math.PI, false);   
        context.clip();   
  
        // 先画一个蓝色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;blue&#39;;   
        context.fill();   
  
        // 画一个黄色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;yellow&#39;;   
        context.fill();   
  
        // 画一个红色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;red&#39;;   
        context.fill();   
  
        /* 
         * restore()方法会返回到context原先的状态，在这里是clip()之前的状态。  
         * 大家可以移除context.beginPath()方法，试试会发生什么。  
         */  
        context.restore();   
        context.beginPath();   
        context.arc(x, y, radius, 0, 2 * Math.PI, false);   
        context.lineWidth = 10;   
        context.strokeStyle = &#39;blue&#39;;   
        context.stroke();   
    }

Copier après la connexion

Encore une fois, la forme générale d'appel de la fonction de recadrage est l'ordre de

save();
clip();
restore();

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Exemple de code pour recadrer une image de zone à l'aide de la méthode clip() dans l'API HTML5 Canvas