HTML5Canvas组件绘制太极图案的图文代码详情

		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill(); 

绘制黑色半圆的代码如下：

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill(); 

在太极图案中添加文字的代码使用了透明处理，Canvas全局透明度设置函数

如下：

		// set transparency value  
		ctx.globalAlpha = 0.2; 

绘制文字的代码如下：

		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250); 

程序完全JavaScript代码如下：

	window.onload = function() {
		var cvs = document.getElementById("canvas-path");
		ctx = cvs.getContext("2d");

		// Create circle, radius = 150
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();
		
		// draw sub circle
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 125, 75, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// fill black and white point
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 275, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 125, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// set transparency value  
		ctx.globalAlpha = 0.2;  
		  
		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);
		ctx.globalAlpha = 1.0; 
		ctx.shadowOffsetX = 2;  
		ctx.shadowOffsetY = 2;  
		ctx.shadowBlur = 2;  
		ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	}; 

我为什么要在插图上加上我的名字，因为发现文章被转载的时候居然没有被标出来！

以上就是HTML5 Canvas组件绘制太极图案的图文代码详情的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于HTML5Canvas组件绘制太极图案的图文代码详情的详细内容...