canvas裁剪clip()函数的具体使用

程序员文章站 2022-06-14 17:21:53

这篇文章主要介绍了canvas裁剪clip()函数的具体使用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 18-03-01...

在canvas中，可以使用clip()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉

未使用裁剪绘制一个圆

<!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('canvas'),  
            context = canvas.getcontext('2d');  
        canvas.width = document.body.clientwidth;  
        canvas.height = document.body.clientheight;  
        context.linewidth = 3;  
        context.strokestyle = 'red';  
        context.beginpath();  
        context.arc(200, 200, 100, (math.pi / 180) * 0, (math.pi / 180) * 360, false);  
        context.stroke();  
        context.closepath();  
    </script>  
</body>  
</html>

效果

canvas裁剪clip()函数的具体使用

使用clip()裁剪区域

<!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('canvas'),  
            context = canvas.getcontext('2d');  
        canvas.width = document.body.clientwidth;  
        canvas.height = document.body.clientheight;  
        context.linewidth = 3;  
        context.strokestyle = 'red';  
        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>

效果

canvas裁剪clip()函数的具体使用

也可以使用arc绘制圆形的剪裁区域

<!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('canvas'),  
            context = canvas.getcontext('2d');  
        canvas.width = document.body.clientwidth;  
        canvas.height = document.body.clientheight;  
        context.linewidth = 3;  
        context.strokestyle = 'red';  
        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>

效果

canvas裁剪clip()函数的具体使用

使用save和restore实现只裁剪单个路径

<!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('canvas'),  
            context = canvas.getcontext('2d');  
        canvas.width = document.body.clientwidth;  
        canvas.height = document.body.clientheight;  
        context.linewidth = 3;  
        context.strokestyle = 'red';  
        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>

效果

canvas裁剪clip()函数的具体使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： CodeIgniter框架数据库事务处理的设计缺陷和解决方案

下一篇：使用HTML5和CSS3制作一个模态框的示例

canvas裁剪clip()函数的具体使用

Nodejs中的require函数的具体使用方法

分析PHP函数array_pop()的具体使用方式_PHP教程

pandas DataFrame.shift()函数的具体使用

浅析PHP函数ereg()的具体使用方法

使用HTML5 Canvas API中的clip()方法裁剪区域图像

html5-canvas中使用clip抠出一个区域的示例代码

html5-canvas中使用clip抠出一个区域的示例代码

使用HTML5 Canvas API中的clip()方法裁剪区域图像

使用Python PIL库中的Image.thumbnail函数裁剪图片

Python内置函数 next的具体使用方法