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实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 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/16 星际争霸
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
axios基本入门用法教程
2017/03/25 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
微信小程序template模板实例详解
2017/10/27 Javascript
js常见遍历操作小结
2019/06/06 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
自荐信的基本格式
2014/02/22 职场文书
公司担保书范文
2014/05/21 职场文书
个人委托书怎么写
2014/09/17 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技