Canvas中的鼠标操作
同样，在canvas中可以有相关的鼠标操作，比如可以返回当前鼠标所在的坐标位置，如下面的代码：
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
canvas.onmousemove = function (e) {
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
}
var context = canvas.getContext(“2d”);
canvas.onmousemove = function (e) {
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
}
在上面的代码中，捕捉了鼠标的移动的事件，当移动时，显示了移动轨迹的X和Y坐标。下面的代码中则更进一步，它能让用户在画布上自由移动鼠标进行涂鸦绘画：
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
context.fillCircle = function (x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
context.clearTo = function (fillColor) {
context.fillStyle = fillColor;
context.fillRect(0, 0, canvas.width, canvas.height);
};
context.clearTo(“#ddd”);
canvas.onmousemove = function (e) {
if (!canvas.isDrawing) return;
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
var radius = 10;
var fillColor = ‘#ff0000′;
context.fillCircle(x, y, radius, fillColor);
};
canvas.onmousedown = function (e) {
canvas.isDrawing = true;
};
canvas.onmouseup = function (e) {
canvas.isDrawing = false;
};
var context = canvas.getContext(“2d”);
context.fillCircle = function (x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
context.clearTo = function (fillColor) {
context.fillStyle = fillColor;
context.fillRect(0, 0, canvas.width, canvas.height);
};
context.clearTo(“#ddd”);
canvas.onmousemove = function (e) {
if (!canvas.isDrawing) return;
var x = e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
var div = document.getElementById(“coords”);
div.innerHTML = “x: ” + x + ” y: ” + y;
var radius = 10;
var fillColor = ‘#ff0000′;
context.fillCircle(x, y, radius, fillColor);
};
canvas.onmousedown = function (e) {
canvas.isDrawing = true;
};
canvas.onmouseup = function (e) {
canvas.isDrawing = false;
};
实际运行的效果见：http://msdeploy.net/IE9/Canvas/mouse.htm
小结
本文概要介绍了HTML 5中功能强大的canvas及其相关主要绘图方法，让开发者对canvas有了概要的认识。HTML 5中的canvas功能十分强大，足以在某些方面跟Flash抗衡，相信随着HTML5的继续发展，canvas的功能将更为强大。
