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畫布中的鼠標座標

回答

相關問題