HTML5 Canvas和Firefox 4 -获取点击坐标

HTML5 Canvas and Firefox 4 - Getting click coordinates

本文关键字：获取 坐标 Canvas Firefox HTML5      更新时间：2023-09-26

我一直在做一堆HTML5视频和画布演示。到目前为止，我一直专注于Chrome，但现在我也在尝试为Firefox和Safari优化它们。

我现在正在工作的一个在Canvas中绘制视频并将视频移动到鼠标点击位置。到目前为止，我在Chrome和Safari中工作，但在Firefox中不行。我还没有找到关于这些主题的很多信息(点击事件，坐标，特定于firefox等)。我从这里复制了代码:

如何获得画布元素上鼠标单击的坐标?http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/

因为他们给我的印象是它应该在所有浏览器中都能工作，但Firefox仍然拒绝。它所做的就是显示视频，它不会对鼠标点击做出反应。

这是我的代码(不包括变量的定义): 
function activateVideo(){
setTarget();
videoElement.play();
animate();
}
function setTarget(){   
targetX=xCoord;
targetY=yCoord
moverX=(targetX-currentX)/100;
moverY=(targetY-currentY)/100;  
}
canvasElement.addEventListener('click', function(){
    /*xCoord = event.clientX - canvasElement.offsetLeft;
    yCoord = event.clientY - canvasElement.offsetTop;
    txtCount.value = xCoord + " + " + yCoord;*/
    if (event.pageX || event.pageY) {
        xCoord = event.pageX;
        yCoord = event.pageY;
    } else {
        xCoord = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        yCoord = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    xCoord -= canvasElement.offsetLeft;
    yCoord -= canvasElement.offsetTop;
    setTarget();
},false);
function animate(){
currentX += moverX;
currentY += moverY;
if(dist(currentX,targetX,currentY,targetY)<1) {
    moverX=0;
    moverY=0;
}
drawVideo(videoElement,context,320,256);
timer = setTimeout(animate,20);
}
function dist(x1,x2,y1,y2){
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}
function drawVideo(videoElement,context,w,h) {
context.clearRect(0,0,1000,600);
context.drawImage(videoElement,currentX,currentY,w,h);
}
playCanvas.addEventListener('click', activateVideo, false);

显然我有点迷路了，如果有人能给我指出正确的方向，我会很感激的。

我有一个使用jquery的工作版本，这可能是最跨浏览器的方式。没那么糟。这是我的小提琴http://jsfiddle.net/jaredwilli/D3PWN/

代码
var canvas = $('canvas');
canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
        clientCrds = '('+ e.clientX +', '+ e.clientY +')';
    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);    
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);
});
var arr = [];
canvas.click(function(e) {
    arr.unshift($('span.first').text());
    console.log(arr);
});

希望这对你有所帮助。:)

您需要将事件对象传递给FF的处理程序(IE工作，因为event通过window.event可用)

canvasElement.addEventListener('click', function(event){
   event = event || window.event;
   ...
相关文章：