在画布上使用透明度

你的浏览器不支持画布(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 = "red";
	ctx.fillRect(0, 0, 400, 300);

	// 右上区域
	ctx.fillStyle = "green";
	ctx.fillRect(400, 0, 400, 300);

	// 左下区域
	ctx.fillStyle = "blue";
	ctx.fillRect(0, 300, 400, 300);

	// 右下区域
	ctx.fillStyle = "yellow";
	ctx.fillRect(400, 300, 400, 300);

	// 设置全局透明度
	ctx.globalAlpha = 0.1;

	// 设置填充颜色
	ctx.fillStyle = "white";

	// 绘制多个透明圆形
	for(var i=0;i<10;i++)
	{
		// 开始路径
		ctx.beginPath();

		// 圆形
		ctx.arc(400, 300, i*30, 0, Math.PI*2, true);

		// 填充路径
		ctx.fill();
	}
}
					

返回目录