[英]event listener on canvas in html5 issue
我是html5中的新手,我想在我的鼠标上创建一个事件监听器,我已经编写了以下代码,但是无法理解y,我无法在我的canvas元素上创建事件监听器,请帮助
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);
鉴于一个ans我也想给我事件监听器代码,也可能是它有错误
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();
}
}
您想要将事件添加到画布,而不是2d上下文:
canvas_simple.addEventListener('mousemove', ev_mousemove, false);
这是一个演示: jsFiddle链接
有一些错误:
您无法将侦听器附加到上下文,侦听器只能附加到:文档中的单个节点,文档本身,窗口或XMLHttpRequest。 所以你应该把它附加到canvas元素。
你不能嵌套画布
canvasHeight属性未定义
我创建了一个jsfiddle,你的例子经过修改和工作 - > 这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.