我是HTML5的新手,想在我的鼠标上创建一个事件监听器。我已经编写了以下代码,但无法理解为什么不能在我的画布元素上创建事件监听器,请帮忙。
var canvasDiv = document.getElementById('canvas');
canvas_simple = document.createElement('canvas');
canvas_simple.setAttribute('height', canvasHeight);
canvas_simple.setAttribute('id', 'canvasSimple');
canvasDiv.appendChild(canvas_simple);
if(typeof G_vmlCanvasManager != 'undefined')
{
canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
}
context_simple = canvas_simple.getContext("2d");
context_simple.addEventListener('mousemove', ev_mousemove, false);
鉴于我的要求,我希望您能提供给我一个事件监听器的代码,可能会有错误。
var started = false;
function ev_mousemove (ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) { // Firefox
x = ev.layerX;
y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
if (!started) {
context.beginPath();
context.moveTo(x, y);
started = true;
}
else {
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 10;
context.lineTo(x, y);
context.stroke();
}
}
// 获取鼠标相对于画布元素的位置。 if (ev.layerX || ev.layerX == 0) { // 火狐浏览器 x = ev.layerX; y = ev.layerY; }
else if (ev.offsetX || ev.offsetX == 0) { // Opera 浏览器 x = ev.offsetX; y = ev.offsetY; }// 事件处理程序就像一个跟踪鼠标移动的绘图铅笔。我们开始绘制由线条组成的路径。 if (!started) {
- Faizan Tanveer