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

1725 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