详解HTML5 Canvas绘制不规则图形时的非零环绕原则


Posted in HTML / CSS onMarch 21, 2016

路径方向与非零环绕原则
平时我们画的图形都是规规矩矩的,那么如果我们用线条画了个抽象派作品,就像下面这图一样,童鞋们知道怎么用fill()染色呢?
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

这里就要用到数学上的一个方法——非零环绕原则,来判断哪块区域是里面,哪块区域是外面。接下来,我们具体来看下什么是非零环绕原则。
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

首先,我们得给图形确定一条路径,只要“一笔画”并且“不走重复路线”就可以了。如图,标出的是其中的一种路径方向。我们先假定路径的正方向为1(其实为-1啥的也都可以,正负方向互为相反数,不是0就行),那么反方向就是其相反数-1。
然后,我们在子路径切割的几块区域内的任意一点各取一条方向任意的射线,这里我只取了三个区域的射线为例,来判断这三块区域是“里面”还是“外面”。
接下来,我们就来判断了。S1中引出的射线L1,与S1的子路径的正方向相交,那么我们就给计数器+1,结果为+1,在外面。
S2中引出的射线L2,与两条子路径的正方向相交,计数器+2,结果为+2,在外面。
S3中引出的射线L3,与两条子路径相交,但是其中有一条的反方向,计数器+1-1,结果为0,在里面。没错,只要结果不为0,该射线所在的区域就在外面。

绘制圆环
记得arc方法吗?它的最后一个参数就是判断是路径方向的,如果是路径相反的两个同心圆在一起,图上色会有什么神奇的效果呢?
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

下面我们通过代码来实现它。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>圆环</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.shadowColor = "#545454";   
  28.         context.shadowOffsetX = 5;   
  29.         context.shadowOffsetY = 5;   
  30.         context.shadowBlur = 2;   
  31.   
  32.         context.arc(400, 300, 200, 0, Math.PI * 2 ,false);   
  33.         context.arc(400, 300, 230, 0, Math.PI * 2 ,true);   
  34.         context.fillStyle = "#00AAAA";   
  35.         context.fill();   
  36.     };   
  37. </script>   
  38. </body>   
  39. </html>  

运行结果:
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

镂空剪纸效果
接下来,我们利用非零环绕原则和阴影来绘制一个镂空的剪纸效果。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>镂空剪纸效果</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.beginPath();   
  28.         context.rect(200,100,400,400);   
  29.         drawPathRect(context, 250, 150, 300, 150);   
  30.         drawPathTriangle(context, 345, 350, 420, 450, 270, 450);   
  31.         context.arc(500, 400, 50, 0, Math.PI * 2, true);   
  32.         context.closePath();   
  33.   
  34.         context.fillStyle = "#058";   
  35.         context.shadowColor = "gray";   
  36.         context.shadowOffsetX = 10;   
  37.         context.shadowOffsetY = 10;   
  38.         context.shadowBlur = 10;   
  39.         context.fill();   
  40.   
  41.     };   
  42.   
  43.     //逆时针绘制矩形   
  44.     function drawPathRect(cxt, x, y, w, h){   
  45.         /**  
  46.          * 这里不能使用beginPath和closePath,  
  47.          * 不然就不属于子路径而是另一个全新的路径,  
  48.          * 无法使用非零环绕原则  
  49.          */  
  50.         cxt.moveTo(x, y);   
  51.         cxt.lineTo(x, y + h);   
  52.         cxt.lineTo(x + w, y + h);   
  53.         cxt.lineTo(x + w, y);   
  54.         cxt.lineTo(x, y);   
  55.   
  56.     }   
  57.   
  58.     //逆时针绘制三角形   
  59.     function drawPathTriangle(cxt, x1, y1, x2, y2, x3, y3){   
  60.         cxt.moveTo(x1,y1);   
  61.         cxt.lineTo(x3,y3);   
  62.         cxt.lineTo(x2,y2);   
  63.         cxt.lineTo(x1,y1);   
  64.     }   
  65.   
  66. </script>   
  67. </body>   
  68. </html>  

运行结果:
详解HTML5 Canvas绘制不规则图形时的非零环绕原则

这里手动绘制矩形的原因是我们想要得到逆时针路径的矩形,而且API提供的rect()方法绘制是顺时针矩形。另外,需要注意的是,这个剪纸是一个图形,一个路径。不能在绘制镂空三角形和绘制镂空矩形的方法里使用beginPath()和closePath(),不然它们就会是新的路径、新的图形,而不是剪纸的子路径、子图形,就无法使用非零环绕原则。

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 #HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 #HTML / CSS
HTML5 画布canvas使用方法
Mar 18 #HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 #HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 #HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 #HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 #HTML / CSS
You might like
我的论坛源代码(十)
2006/10/09 PHP
使用php4加速网络传输
2006/10/09 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
详解Python当中的字符串和编码
2015/04/25 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
婚礼答谢宴主持词
2014/03/14 职场文书
农村葬礼主持词
2014/03/31 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年端午节活动总结
2015/02/11 职场文书
实习班主任自我评价
2015/03/11 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
KVM基础命令详解
2022/04/30 Servers