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学习系列之移动属性详解
Jul 04 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 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 随机数的深入理解
2013/06/05 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
微信支付开发订单查询实例
2016/07/12 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python中强大的format函数实例详解
2018/12/05 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Django 外键的使用方法详解
2019/07/19 Python
Python简单实现区域生长方式
2020/01/16 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
中学优秀班主任事迹材料
2014/05/01 职场文书
课外小组活动总结
2014/08/27 职场文书
房产公证委托书范本
2014/09/20 职场文书
化工见习报告范文
2014/10/31 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
python​格式化字符串
2022/04/20 Python