在画布上展示数学的艺术

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

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

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

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

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;

// 图形大小
var circleR = 300;

// 超时定义
var timeout = 0;

// 间隔度数（45， 15， 9， 3）
var often = 9;

if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// 先清画布
	ctx.clearRect(0, 0, mc.width, mc.height);

	// 坐标点移至画布中心
	ctx.translate(mc.width / 2, mc.height / 2);

	// 绘制每条直线
	for (var i = 0; i < 360 / often; i++)
	{
		for (var a = -45; a <= 45; a+=often)
		{
			// 每0.1秒绘制一条
			setTimeout("drawLineOnce("+a+");", 10 * timeout);
			timeout++;
		}
	}
}

function drawLineOnce(a)
{
	// 开始路径
	ctx.beginPath();

	// 直线起始点
	ctx.moveTo(0, circleR);

	var radians = Math.PI / 180 * a;

	var x = (circleR * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);

	// 直线结束点
	ctx.lineTo(x, 0);

	// 直线样式
	if(Math.abs(a) == 45)
	{
		ctx.strokeStyle	= "rgb(255,255,255)";
		ctx.lineWidth	= 1;
	}
	else if(a == 0)
	{
		ctx.strokeStyle	= "rgb(200,200,200)";
		ctx.lineWidth	= 0.5;
	}
	else
	{
		ctx.strokeStyle	= "rgb(110,110,110)";
		ctx.lineWidth	= 0.2;
	}

	// 创建径向渐变
	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.shadowBlur		= 3;
	ctx.shadowColor		= 'rgba(255, 255, 255, 0.5)';

	// 绘制
	ctx.stroke();

	// 旋转画布
	ctx.rotate((Math.PI / 180) * often);
}
					

返回目录