在HTML5画布上绘制图像

Question

我想在画布上绘制图像，但图像只会出现在单击画布时的位置。我也知道element.getBoundingClientRect方法可以让我得到画布的偏移量。我想合并它们，所以当点击画布的任何部分时，图像将出现在相同的位置，并且X和Y偏移量也会显示出来。

当前我的图像将显示在onload上，当我在画布上点击Onclick时，图像将出现在相同的位置。第二件事是，同时图像的X和Y偏移位置也会显示出来。

Answer 1

修改您的JS代码：

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

$results=$("#results"); 
$dotposition=$("#dotposition"); 
var position = {x: 0, y: 0}; 

function handleMouseMove(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    // You could calc the offsets once if you know 
    // the user will not scroll the canvas 
    var BB=canvas.getBoundingClientRect(); 
    var offsetX=BB.left; 
    var offsetY=BB.top; 

    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 
    $results.text("Mouse position: "+mouseX+"/"+mouseY); 
    position.x = mouseX; 
    position.y = mouseY; 
} 

function handleMouseClick(e) { 
    //Clearing the canvas before redraw, remove this line if you want to keep prev images 
    ctx.clearRect (0 , 0 , canvas.width , canvas.height); 

    ctx.drawImage(img,position.x - img.width/2,position.y - img.height/2); 
    $dotposition.text("Dot position: "+position.x+"/"+position.y); 
} 

var img = new Image(); 
img.onload = function(){ 
    canvas.onmousemove = handleMouseMove; 
    canvas.onclick = handleMouseClick; 
}; 
img.src="https://dl.dropboxusercontent.com/s/7vlxwy1156wnhcw/redFood.png"; 

http://jsfiddle.net/ZH4KW/1/