在画布上绘制坐标曲线

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

	// 加载坐标轴图片
	var img = new Image();
	img.src = '/IBlog/Html5/13Canvas_Coord/Coord.png';

	// 加载完成后
	img.onload = function()
	{
		// 保存画布状态
		ctx.save();

		// 移动坐标原点
		ctx.translate(310, 235);

		// 绘制坐标图片
		ctx.drawImage(img, 0, 0);

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

		// 移动到图片中的起始点
		ctx.moveTo(30, 96);

		// 贝塞尔曲线
		ctx.bezierCurveTo(50, 96, 66, 10, 80, 50);
		ctx.bezierCurveTo(80, 50, 100, 150, 158, 20);

		// 填充路径
		ctx.stroke();

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

返回目录