HTML5画布中的鼠标坐标

我尝试了许多不同的方法来尝试在HTML5画布中获得鼠标坐标以补充视频，并且在Chrome或Safari中都没有任何效果。HTML5画布中的鼠标坐标

目前我使用：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Test</title> 
<script src="modernizr-1.6.min.js"></script> 
<script type="text/javascript"> 
window.addEventListener('load', eventWindowLoaded,false); 
var videoElement; 
var VideoDiv; 
var Object1; 
var Mouse = { 
     x:0 
     x:y} 
function eventWindowLoaded(){ 
     videoElement = document.createElement("video"); 
     videoDiv = document.createElement('div'); 
     document.body.appendChild(videoDiv); 
     videoDiv.appendChild(videoElement); 
     videoDiv.setAttribute("style", "display:none;"); 
     var videoType = supportedVideoFormat(videoElement); 
     if (videoType == ""){ 
      alert("no video support"); 
      return; 
     } 
     videoElement.setAttribute("src", "different_movement>" + videoType); 
     videoElement.addEventListener("canplaythrough", videoLoaded, false); 
} 
function supportedVideoFormat(video){ 
     var returnExtension= ""; 
     if(video.canPlayType("video/webm") =="probably" || video.canPlayType("video/webm") == "maybe"){ 
      returnExtension = "webm"; 
     } else if (video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe"){ 
      returnExtension = "mp4"; 
     }else if(video.canPlayType("video/ogg") == "probably" || video.canPlayType("video/ogg") == "maybe"){ 
      returnExtension = "ogv"; 
     } 
     return returnExtension; 
} 

function videoLoaded(event){ 
     canvasApp(); 
} 
canvasOne.onmousemove = function (event){ 
     Mouse={ 
      x: event.offsetX, 
      y: event.offsetY} 
     } 
} 
function canvasApp(){ 
     function drawScreen(){ 
      context.drawImage(videoElement, 0, 0); 
      context.fillStyle = '#ffffff'; 
      context.fillText(Mouse.x, 280, 280); 
      context.fillText(Mouse.y, 280, 300); 
      } 
     var theCanvas = document.getElementByID('canvasOne'); 
     var context = theCanvas.getContext('2d'); 
     videoElement.play(); 

     setinterval(drawScreen, 33); 
} 
</script> 
</head> 
<body> 
<canvas id="canvasOne" width="640" height="480"> 
Your browser does not support HTML5 Canvas. 
</canvas> 
</div> 
</body> 
</html>

这样做的结果是0,0将显示在从初始变量集合在0,0视频中可以但随后而不是改变为鼠标在屏幕上移动，它保持0,0。这使我相信它是查找不起作用的鼠标坐标的代码的一部分。

我在寻找鼠标尝试了各种其他企图坐标包括：

Mouse={ 
x: event.pageX, 
y: event.pageX}

，

if (e.pageY) { 
    posy = e.pageY; 
    } else if (e.clientY) { 
    posy = e.clientY + document.body.scrollTop 
     + document.documentElement.scrollTop; 
    }

，

var mouseX; 
var mouseY; 
var pieceX; 
var pieceY; 
if (e.pageX || e.pageY) { 
     mouseX = e.pageX; 
     mouseX = e.pageY; 
     } else { 
     mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
}

我的最终产品应该是有视频鼠标交互，当点击视频上的某些部分时会播放声音（因此，部分o f视频）。我已经尝试过不使用画布，而是将图像放置在具有图像映射的画布顶部，但似乎不起作用。

当我计算出鼠标坐标时，我将遇到的另一个问题是我将测试与鼠标坐标的碰撞以启动它以播放声音。

编辑：使用e.offset完全重写代码，似乎工作。

来源

2011-09-21 Anthony D

第一个世界问题：有具有未被完全缩进代码这么多问题我用完了所有TAB键相关的笑话。 '：P' –

我修复了代码缩进（我把它全部输入到了我的情况中，它不仅仅是一个简单的复制+粘贴+第一个帖子，免费赠送）。所有的问题都与同一个项目的主要问题是鼠标坐标有关，没有看到问题是什么。 –

是否在浏览器中抛出任何JavaScript错误？ –

我用来设置一个html页面，其中一个canvas元素位于文档的左上角。然后，当我得到clientX-Y时，它的原点位于canvas文档的左上角，位于iframe中，您可以将其放置在包含canvas的文档上的任何位置。这很容易。

<iframe scrolling="no" height="100%" width="100%" src="canvas.html"></iframe>

另外，当画布按比例缩放时，我画了比例尺。我将这添加到了我的画布程序中。

c = canvas element, ctx = canvas context; 
ctx.scale(c.width/630,c.height/800); // I originally intended it to be 630x800

（注：我不知道这是否回答你的问题，但它是我如何找到坐标，而无需弥补。）

来源

2011-10-30 04:57:59 Stephen

HTML5画布中的鼠标坐标

回答

相关问题