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使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
javascript代码实现简易计算器
2021/01/25 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python之PyMongo使用总结
2017/05/26 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python写日志文件操作类与应用示例
2019/07/01 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
某个公司的Java笔面试题
2016/03/11 面试题
大专生工程监理求职信
2013/10/04 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
安全负责人任命书
2014/06/06 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang