在画布上绘制斯皮罗图形

你的浏览器不支持画布(Canvas).

我们可以通过新的HTML5画布（Canvas）标签添加一个画布到网页中，以下代码用于定义一个 800 x 600 大小的画布。

你的浏览器不支持画布(Canvas).
					

再通过以下 JavaScript 代码控制在画布中的绘图。

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;
var type = 0;
var r = 1;
if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// 设置定时器
  	setInterval(draw, 80);
}

function draw()
{
	// 清空画布
  	ctx.clearRect(0, 0, 800, 600);

	// 计算绘制状态
	if(type < 600)
	{
		type ++ ;
	}
	else
	{
		type = 0;

		if(r<10)
			r++;
		else
			r = 1;
	}

	// 保存画布状态
	ctx.save();

	// 设置线条宽度
	ctx.lineWidth = 2;

	// 移动到中心点
	ctx.translate(400, 300);

	// 创建径向渐变
	var grd = ctx.createRadialGradient(0, 0, 0, 0, 0, 300);

	// 渐变色
	grd.addColorStop(0,"red");
	grd.addColorStop(0.15,"orange");
	grd.addColorStop(0.3,"yellow");
	grd.addColorStop(0.45,"green");
	grd.addColorStop(0.6,"Cyan");
	grd.addColorStop(0.75,"blue");
	grd.addColorStop(1,"purple");

	// 设置绘制颜色
	ctx.strokeStyle = grd;

	// 阴影
	ctx.shadowOffsetX = 1;
	ctx.shadowOffsetY = 1;
	ctx.shadowBlur    = 1;
	ctx.shadowColor   = 'rgba(255, 255, 255, 1.0)';

	// 绘制斯皮罗图形
	drawSpirograph(ctx, type<300?type:600-type, r, 100);

	// 恢复画布状态
	ctx.restore();
}

// 绘制斯皮罗图形
function drawSpirograph(ctx, R, r, O)
{
	var x1 = R-O;
	var y1 = 0;
	var i  = 1;

	// 开始路径
	ctx.beginPath();

	// 移动到指定点
	ctx.moveTo(x1,y1);

	do
	{
		if (i>20000) break;
		var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
		var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))

		// 线条
		ctx.lineTo(x2,y2);
		x1 = x2;
		y1 = y2;
		i++;
	} while (x2 != R-O && y2 != 0 );

	// 绘制路径
  	ctx.stroke();
}
					

返回目录