通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle、arc、beginPath、closePath、fill方法

代码如下:

	<canvas id="rect" width="310" height="310" style="border:1px yellow solid;">
	</canvas>
	<script>
		var id=document.getElementById("rect");
		var context= id.getContext("2d");
		context.fillStyle="#AAAAAA";
		context.fillRect(0,0,310,310);
		context.fillStyle="#FFFFFF";
		context.beginPath();
		context.arc(155,155,150,Math.PI/2,Math.PI*3/2,true);
		context.closePath();
		context.fill();
		context.fillStyle="#000000";
		context.beginPath();
		context.arc(155,155,150,Math.PI/2,Math.PI*3/2,false);
		context.closePath();
		context.fill();
		context.beginPath();
		context.arc(155,230,75,Math.PI/2,Math.PI*3/2,true);
		context.closePath();
		context.fill();
		context.fillStyle="#FFFFFF";
		context.beginPath();
		context.arc(155,80,75,Math.PI/2,Math.PI*3/2,false);
		context.closePath();
		context.fill();
		context.beginPath();
		context.arc(155,230,15,0,Math.PI*2,false);
		context.closePath();
		context.fill();
		context.fillStyle="#000000";
		context.beginPath();
		context.arc(155,80,15,0,Math.PI*2,false);
		context.closePath();
		context.fill();
	</script>

  

通过HTML5标签canvas绘制一个八卦图案,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。