在画布上绘制钟表

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

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

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

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

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

	// 先绘制一次
	clock();

	// 设置定时器
  	setInterval(clock, 1000);
}

function clock()
{
	// 先取当前时间
	var now = new Date();

	// 先清画布
	ctx.clearRect(0, 0, 800, 600);

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

	// 移动坐标原点
	ctx.translate(400, 300);

	// 画布放大2倍
	ctx.scale(2, 2);

	// 旋转
	ctx.rotate(-Math.PI/2);

	// 设置默认绘制颜色
	ctx.strokeStyle = "#A335EE";

	// 设置默认填充颜色
	ctx.fillStyle = "#A335EE";

	// 默认线条宽度
	ctx.lineWidth = 8;

	// 默认线条样式
	ctx.lineCap = "round";

	//
	// 绘制小时标记
	//
	ctx.save();
	for(var i=0;i<12;i++)
	{
		ctx.beginPath();
		ctx.rotate(Math.PI/6);
		ctx.moveTo(100,0);
		ctx.lineTo(120,0);
		ctx.stroke();
	}
	ctx.restore();

	//
	// 绘制分钟标记
	//
	ctx.save();

	// 线条宽度
	ctx.lineWidth = 5;

	for(i=0;i<60;i++)
	{
		if(i%5 != 0)
		{
			ctx.beginPath();
			ctx.moveTo(117,0);
			ctx.lineTo(120,0);
			ctx.stroke();
		}
		ctx.rotate(Math.PI/30);
	}
	ctx.restore();

	// 取当前秒
	var sec = now.getSeconds();

	// 取当前分钟
	var min = now.getMinutes();

	// 取当前小时
	var hr  = now.getHours();

	// 转为12时制
	hr = (hr>=12)?(hr-12):hr;

	//
	// 绘制时针
	//
	ctx.save();
	ctx.strokeStyle = "#0070DD";
	ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
	ctx.lineWidth = 14;
	ctx.beginPath();
	ctx.moveTo(-20,0);
	ctx.lineTo(80,0);
	ctx.stroke();
	ctx.restore();

	//
	// 绘制分针
	//
	ctx.save();
	ctx.strokeStyle = "#FF8000";
	ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
	ctx.lineWidth = 10;
	ctx.beginPath();
	ctx.moveTo(-28,0);
	ctx.lineTo(90,0);
	ctx.stroke();
	ctx.restore();

	//
	// 绘制秒针
	//
	ctx.save();
	ctx.strokeStyle = "#FF0000";
	ctx.rotate(sec * Math.PI/30);
	ctx.lineWidth = 3;
	ctx.beginPath();
	ctx.moveTo(-30, 0);
	ctx.lineTo(100, 0);
	ctx.stroke();

	// 填充中间表轴
	ctx.beginPath();
	ctx.arc(0, 0, 10, 0, Math.PI*2, true);
	ctx.fill();
	ctx.restore();

	// 绘制钟表内边
	ctx.beginPath();
	ctx.strokeStyle = '#1EFF00';
	ctx.lineWidth = 3;
	ctx.arc(0, 0, 142, 0, Math.PI*2, true);
	ctx.stroke();

	// 绘制钟表外边
	ctx.beginPath();
	ctx.arc(0, 0, 146, 0, Math.PI*2, true);
	ctx.stroke();

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

返回目录