Maison > Article > interface Web > Utiliser la fonction clip() pour recadrer le canevas

Utiliser la fonction clip() pour recadrer le canevas

小云云original: 2018-03-03 10:13:501773parcourir

Dans Canvas, vous pouvez utiliser la fonction clip() pour recadrer la zone. Après avoir défini la zone de recadrage, seule l'image dans la zone peut être affichée et le reste sera bloqué. Cet article vous présente principalement les informations pertinentes sur l'utilisation spécifique de la fonction canvas clipping(). J'espère qu'il pourra vous aider.

Dessinez un cercle sans découpage

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        *{margin:0; padding:0;}  
        html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}  
    </style>  
</head>  
<body>  
    <canvas id="canvas"></canvas>  
    <script>  
        var canvas = document.getElementById(&#39;canvas&#39;),  
            context = canvas.getContext(&#39;2d&#39;);  
        canvas.width = document.body.clientWidth;  
        canvas.height = document.body.clientHeight;  
        context.lineWidth = 3;  
        context.strokeStyle = &#39;red&#39;;  
        context.beginPath();  
        context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.stroke();  
        context.closePath();  
    </script>  
</body>  
</html>

Effet

Utilisez clip() pour recadrer la zone

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        *{margin:0; padding:0;}  
        html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}  
    </style>  
</head>  
<body>  
    <canvas id="canvas"></canvas>  
    <script>  
        var canvas = document.getElementById(&#39;canvas&#39;),  
            context = canvas.getContext(&#39;2d&#39;);  
        canvas.width = document.body.clientWidth;  
        canvas.height = document.body.clientHeight;  
        context.lineWidth = 3;  
        context.strokeStyle = &#39;red&#39;;  
        context.rect(0, 0, 200, 200);  
        context.clip();  
        context.beginPath();  
        context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.stroke();  
        context.closePath();  
    </script>  
</body>  
</html>

Effet

Vous pouvez également utiliser l'arc pour dessiner une zone de découpage circulaire

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        *{margin:0; padding:0;}  
        html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}  
    </style>  
</head>  
<body>  
    <canvas id="canvas"></canvas>  
    <script>  
        var canvas = document.getElementById(&#39;canvas&#39;),  
            context = canvas.getContext(&#39;2d&#39;);  
        canvas.width = document.body.clientWidth;  
        canvas.height = document.body.clientHeight;  
        context.lineWidth = 3;  
        context.strokeStyle = &#39;red&#39;;  
        context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.clip();  
        context.beginPath();  
        context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.stroke();  
        context.closePath();  
    </script>  
</body>  
</html>

Effet

Utilisez la sauvegarde et la restauration pour obtenir l'effet de découpage d'un seul chemin

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        *{margin:0; padding:0;}  
        html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}  
    </style>  
</head>  
<body>  
    <canvas id="canvas"></canvas>  
    <script>  
        var canvas = document.getElementById(&#39;canvas&#39;),  
            context = canvas.getContext(&#39;2d&#39;);  
        canvas.width = document.body.clientWidth;  
        canvas.height = document.body.clientHeight;  
        context.lineWidth = 3;  
        context.strokeStyle = &#39;red&#39;;  
        context.save();  
        context.rect(0, 0, 200, 200);  
        context.clip();  
        context.beginPath();  
        context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.stroke();  
        context.closePath();  
        context.restore();  
        context.beginPath();  
        context.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
        context.stroke();  
        context.closePath();  
    </script>  
</body>  
</html>

Recommandations associées :

Utilisation de la méthode clip() dans l'API HTML5 Canvas pour recadrer un exemple de code d'image de zone

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!

html5 canvas

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：Le framework MUI utilise HTML5 pour implémenter la fonction d'analyse de code QRArticle suivant：Le framework MUI utilise HTML5 pour implémenter la fonction d'analyse de code QR

Articles Liés

Voir plus