在画布上绘制矩形

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

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

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

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

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

	// 绘制颜色
	ctx.fillStyle="#FF0000";
	ctx.strokeStyle = "#ff0000";
	ctx.lineWidth   = 2;

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

	// 移动坐标点到旋转图形中心
	ctx.translate(mc.width/4, mc.height/4);

	// 填充区域
	ctx.fillRect(-50,-50,100,100);

	// 返回上次保存的画布状态
	ctx.restore();

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

	// 移动坐标点到旋转图形中心
	ctx.translate(mc.width*3/4, mc.height/4);

	// 绘制空心矩形
	ctx.strokeRect(-50, -50, 100, 100);

	// 返回上次保存的画布状态
	ctx.restore();

	// 增加阴影
	ctx.shadowOffsetX = 10;
	ctx.shadowOffsetY = 10;
	ctx.shadowBlur = 10;
	ctx.shadowColor = "black";

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

	// 移动坐标点到旋转图形中心
	ctx.translate(mc.width/4, mc.height*3/4);

	// 旋转45度
	ctx.rotate(45 * Math.PI / 180);

	// 填充区域
	ctx.fillRect(-50,-50,100,100);

	// 返回上次保存的画布状态
	ctx.restore();

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

	// 移动坐标点到旋转图形中心
	ctx.translate(mc.width*3/4, mc.height*3/4);

	// 旋转45度
	ctx.rotate(45 * Math.PI / 180);

	// 绘制空心矩形
	ctx.strokeRect(-50, -50,100,100);

	// 返回上次保存的画布状态
	ctx.restore();
}
					

返回目录