在画布上使用裁剪

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

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

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

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

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;

// 鼠标在浏览器页面中的位置
var mx = 0;
var my = 0;

if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// 加载图片
	var img = new Image();

	// 指定图片源
	img.src = "/IBlog/Html5/23Canvas_Clip/Back.jpg";

	// 加载完成后绘制图片
	img.onload = function()
	{
		// 定时器控制绘制速度
		setInterval(draw, 30);

		// 鼠标移动事件
		mc.addEventListener('mousemove', ev_mousemove, false);
	}
}

function draw()
{
	// 先清空画布
	ctx.clearRect(0, 0, 800, 600);

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

	// 绘制图片到画布
	ctx.drawImage(img, 0, 0);

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

	// 以白色加透明覆盖画布
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, 800, 600);

	ctx.strokeStyle = "white";

	//
	// 设置裁剪路径
	//
	ctx.beginPath();
	ctx.arc(mx, my, 100, 0, Math.PI*2, true);
	ctx.clip();

	// 在裁剪区域重新绘制图片
	ctx.drawImage(img, 0, 0);

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

	// 绘制颜色
	ctx.strokeStyle = "red";
	ctx.font        = '26px Verdana';

	// 输出鼠标在画布上的坐标
	var msg = "X:" + mx + " Y:" + my;
	ctx.strokeText(msg, 10, 30);
}

function ev_mousemove(ev)
{
	if (ev.layerX || ev.layerX == 0)
	{
		// 在Firefox中取鼠标坐标
		mx = ev.layerX;
		my = ev.layerY;
	}
	else if (ev.offsetX || ev.offsetX == 0)
	{
		// 在Opera中取鼠标坐标
		mx = ev.offsetX;
		my = ev.offsetY;
	}
}
					

返回目录