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


Posted in HTML / CSS onMarch 01, 2018

在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()函数的具体使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
html5.2 dialog简介详解
Feb 27 #HTML / CSS
Html5页面中的返回实现的方法
Feb 26 #HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 #HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 #HTML / CSS
canvas绘制视频封面的方法
Feb 05 #HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 #HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP 实现链式操作
2021/03/09 PHP
QQ登录简单实现代码
2021/03/09 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
vue组件学习教程
2017/09/09 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python实现单词翻译功能
2017/06/06 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
浅谈Python协程
2020/06/17 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
民主生活会意见
2015/06/05 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电