在画布上绘制直线

你的浏览器不支持画布(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");

	// 设置画笔颜色
	ctx.strokeStyle = "#ff0000";

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

	// 移动到起始坐标点（0，0）
	ctx.moveTo(0,0);

	// 设置画线终点
	ctx.lineTo(mc.width, mc.height);

	// 移动到起始坐标点（800，0）
	ctx.moveTo(mc.width, 0);

	// 设置画线终点
	ctx.lineTo(0, mc.height);

	// 画出线条
	ctx.stroke();
}
					

返回目录