画布上的绘图程序

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

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

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

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

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

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

	// 字体
	ctx.font         = 'bold 32px sans-serif';

	// 阴影
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

	// 填充色
	ctx.fillStyle   = '#ff00ff';

	// 绘制色
	ctx.strokeStyle = '#f00';

	// 线条宽度
	ctx.lineWidth   = 2;

	// 画笔
	tool = new tool_pencil();

	// 鼠标按下，移动和弹起事件
	mc.addEventListener('mousedown', ev_canvas, false);
	mc.addEventListener('mousemove', ev_canvas, false);
	mc.addEventListener('mouseup', ev_canvas, false);
}

// 画笔
function tool_pencil()
{
	var tool = this;
	this.started = false;

	// 鼠标按下处理
	this.mousedown = function(ev)
	{
		// 记下路径
		ctx.beginPath();
		ctx.moveTo(ev._x, ev._y);
		tool.started = true;
	};

	// 鼠标移动
	this.mousemove = function (ev)
	{
		// 清空坐标显示区域
		ctx.clearRect (0, 0, 200, 36);

		// 坐标框
		ctx.strokeRect(0, 0, 200, 36);

		// 坐标
		var strMsg = "X:" + ev._x + " Y:" + ev._y;
		ctx.strokeText(strMsg, 10, 30);

		// 绘制直线
		if(tool.started)
		{
			ctx.lineTo(ev._x, ev._y);
			ctx.stroke();
		}
	};

	// 鼠标释放
	this.mouseup = function(ev)
	{
		if (tool.started)
		{
			tool.mousemove(ev);
			tool.started = false;
		}
	};
}

// 鼠标事件
function ev_canvas (ev)
{
	if(ev.layerX || ev.layerX == 0)
	{
		// 在Firefox中取鼠标坐标
		ev._x = ev.layerX;
		ev._y = ev.layerY;
	}
	else if (ev.offsetX || ev.offsetX == 0)
	{
		// 在Opera中取鼠标坐标
		ev._x = ev.offsetX;
		ev._y = ev.offsetY;
	}

	// 计算颜色
	var xc = ~~(256 * ev._x / mc.width);
	var yc = ~~(256 * ev._y / mc.height);

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

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

	// 调用画笔事件
	var func = tool[ev.type];
	if(func)
	{
		func(ev);
	}
}
					

返回目录