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

来源：互联网发布：java get post 编辑：程序博客网时间：2024/04/27 13:56

根据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;varctx=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>

0 0