Utiliser la fonction clip() pour recadrer le canevas-tutoriel HTML-php.cn

Utiliser la fonction clip() pour recadrer le canevas

小云云

Libérer： 2018-03-03 10:13:50

original

1899 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion