在画布上绘制风格

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

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

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

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

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

	// 填充整个画布
	for(var i=0;i<5;i++)
	{
		for(var j=0;j<5;j++)
		{
			// 每块颜色
			ctx.strokeStyle = 'rgb(' + Math.floor(255 - 51*i) + ',' + Math.floor(255 - 51*j) + ', 0)';

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

			// 计算圆形位置
			ctx.arc(60+i*160, 60+j*120, 50, 0, Math.PI * 2, true);

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

返回目录