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

最新推荐文章于 2022-02-24 11:42:40 发布

面条请不要欺负汉堡

最新推荐文章于 2022-02-24 11:42:40 发布

阅读量866

点赞数

分类专栏： html5 文章标签： canvas 剪纸效果图形非零坏绕原则

本文链接：https://blog.csdn.net/gao_xu_520/article/details/58109921

版权

html5 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

根据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>