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属性实现炫酷读者墙效果
Jan 08 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
JavaScript中的事件处理
2008/01/16 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
vue实现拖拽进度条
2021/03/01 Vue.js
python实现类的静态变量用法实例
2015/05/08 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Django密码存储策略分析
2020/01/09 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
举例讲解Python装饰器
2020/12/24 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
一名女生的自荐信
2013/12/08 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Python快速实现一键抠图功能的全过程
2021/06/29 Python