在画布上绘制心形

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

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

	// 移动坐标点
	ctx.translate(250, 150);

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

 	// 移动到
	ctx.moveTo(150, 80);

 	// 画曲线
	ctx.bezierCurveTo(150, 74, 140, 50, 100, 50);
	ctx.bezierCurveTo(40, 50, 40, 125, 40, 125);
	ctx.bezierCurveTo(40, 160, 80, 204, 150, 240);
	ctx.bezierCurveTo(220, 204, 260, 160, 260, 125);
	ctx.bezierCurveTo(260, 125, 260, 50, 200, 50);
	ctx.bezierCurveTo(170, 50, 150, 74, 150, 80);

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

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

返回目录