canvas系类-非零坏绕原则（二）制作剪纸效果

悠悠 2021-09-11 08:10 252阅读 0赞

![20170227154030806][]

根据[canvas系类-非零坏绕原则（一）][canvas_-]，我们可以制作出剪纸的效果：

分析此图：要得到内图形没有填充的效果，需要最后结果为0，所以我们把外矩形采用顺时针的方向绘制，那矩形内的图形都得采用逆时针绘制，这样就可以。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> //1.获取canvas上下文， var dom=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var ctx=dom.getContext('2d');//获取canvas上下文的内容 ctx.beginPath(); ctx.rect(100,100,600,600); drawrect(ctx,200,200,400,200);// 逆时针。 drawTriangle(ctx,200,450,200,600,300,500,400,600,400,450); ctx.arc(550,550,100,0,Math.PI*2,true);//False = 顺时针，true = 逆时针。 ctx.closePath(); ctx.fillStyle="#058"; ctx.shadowColor="gray"; ctx.shadowOffsetX=10; ctx.shadowOffsetY=10; ctx.shadowBlur=10; ctx.fill(); //矩形 function drawrect(ctx,x,y,width,height){ ctx.moveTo(x,y); ctx.lineTo(x,y+height); ctx.lineTo(x+width,y+height); ctx.lineTo(x+width,y); ctx.lineTo(x,y); } //特殊形状 function drawTriangle(ctx,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5){ ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineTo(x3,y3); ctx.lineTo(x4,y4); ctx.lineTo(x5,y5); ctx.lineTo(x1,y1); } </script> </body> </html>

[20170227154030806]: /images/20210813/2fb8d799710e4c8fab7c7bf007a929a0.png
[canvas_-]: http://blog.csdn.net/gao_xu_520/article/details/58093374

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas制作下雨雨滴效果

canvas绘制下雨雨滴打在地面动画特效。雨滴的方向是依据鼠标的位置而来的，落到地面时候，产生了飞溅的小点点，很形象。效果图 ![在这里插入图片描述][8e5c3f9

r囧r小猫/ 2024年02月20日 12:38/ 0 赞/ 68 阅读

相关 Canvas制作喷泉效果示例

Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例效果图 ![在这里插入图片描述][2011ff4dfa2143488a343feef5815abd.gi

ゝ一纸荒年。/ 2024年02月20日 12:37/ 0 赞/ 73 阅读

相关平面直角系【坐标系旋转】、【点绕坐标系旋转】、【A点绕B点旋转】

前言本文整理在平面直角系中，坐标系旋转、某点绕着坐标系旋转、坐标点A 绕着点B旋转，求旋转后的点坐标。看了网上好的文章，发现部分有误或不完整，这里简单总结一下。

àì夳堔傛蜴生んèń/ 2023年01月17日 06:23/ 0 赞/ 184 阅读

相关 html5的canvas知识总结（8）isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则

1. ctx.isPointInPath(80,80)：判断点是否在上面路径的区域内。 ctx.isPointInStroke(80,50)：判断点是否在上面路径的边缘线

忘是亡心i/ 2022年05月12日 06:58/ 0 赞/ 394 阅读

相关 canvas制作简易画板

![70][] <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

我不是女神ヾ/ 2021年09月16日 04:10/ 0 赞/ 386 阅读

相关 canvas系类-非零坏绕原则（二）制作剪纸效果

![20170227154030806][] 根据[canvas系类-非零坏绕原则（一）][canvas_-]，我们可以制作出剪纸的效果：分析此图：要得到内图形没有填充的

悠悠/ 2021年09月11日 08:10/ 0 赞/ 253 阅读

相关 canvas系类-加载/裁剪图片(二)

图片裁剪：clip() 方法从原始画布中剪切任意形状和尺寸。裁切路径和普通的 canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。提示：一

短命女/ 2021年09月11日 08:10/ 0 赞/ 283 阅读

相关 canvas系类-非零坏绕原则（一）

非零环绕原则：图形范围区域中，从该区域随意描点画出一条足够长的线段，再观察此线段是否与图形的路径相交，根据逆时针方向为负（-1），顺时针方向为正（1），再把相交的值

灰太狼/ 2021年09月11日 08:08/ 0 赞/ 272 阅读

相关 canvas系类-加载/裁剪图片一

一.知识点： ![20170227102100237][] 二.操作 1.获取图片的方式 ①创建一个新的 HTMLImageElement 对象。要实现这个方法，

朴灿烈づ我的快乐病毒、/ 2021年09月11日 08:04/ 0 赞/ 319 阅读

相关 canvas 粒子效果

用到了underscore.js框架鼠标移动事件通过类来生成和改变球的位置通过定时器来清屏后添加球 <html> <head> <

Bertha 。/ 2021年07月24日 15:29/ 0 赞/ 478 阅读