详解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教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 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
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
再论Javascript的类继承
2011/03/05 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python线程的几种创建方式详解
2019/08/29 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python实现取余操作的简单实例
2020/08/16 Python
python Gabor滤波器讲解
2020/10/26 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
淘宝活动策划方案
2014/02/06 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
工作岗位职责范本
2015/02/15 职场文书
大学生见习总结报告
2015/06/24 职场文书
python实现局部图像放大
2021/11/17 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers