画布上的渐变与事件

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

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

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

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

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

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

// 在画布上移动鼠标
function ev_mousemove(ev)
{
	// 画布大小
    var width = mc.width;
    var height = mc.height;

	// 鼠标位置
	var mx;
	var my;

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

	// 计算颜色
    var xc = ~~(256 * mx / width);
    var yc = ~~(256 * my / height);

	// 先清画布
	ctx.clearRect(0, 0, 800, 600);

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

	// 创建径向渐变
    grad = ctx.createRadialGradient(mx, my, 0, mx, my, 600);
    grad.addColorStop(0, '#000');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));

	// 设置渐变填充色
    ctx.fillStyle = grad;

    // 填充画布
    ctx.fillRect(0, 0, 800, 600);
}
					

返回目录