在html5画布中用鼠标旋转图像

Question

我在使用html5转动图像时出现了一些问题。我有一个背景图像和一个前景图像。图像正确显示，但我无法让前景图像旋转。

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

var canvasOffset = $("#canvas").offset(); 
var offsetCX = canvasOffset.left; 
var offsetCY = canvasOffset.top; 
var cx = canvas.width/2; 
var cy = canvas.height/2; 
var r = -2.3; 

var background = new Image(); 
background.src = "http://i.imgur.com/dHDMocI.png"; 

background.onload = function drawBackground() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(background, 0, 0); 

    var pijl = new Image(); 
    pijl.src = "http://i.imgur.com/2N70aC1.png"; 

    pijl.onload = function drawPijl() { 
    var xOffset = pijl.width/-2; 
    var yOffset = pijl.height/-2; 
    ctx.save(); 
    ctx.translate(242, 233); 
    ctx.rotate(r); 
    ctx.drawImage(pijl, xOffset, yOffset); 
    ctx.restore(); 
    } 
} 

function handleMouseDown(e) { 
    mouseX = parseInt(e.clientX - offsetCX); 
    mouseY = parseInt(e.clientY - offsetCY); 
    drawBackground(false); 
    isDown = ctx.isPointInPath(mouseX, mouseY); 
    console.log(isDown); 
} 

function handleMouseUp(e) { 
    isDown = false; 
} 

function handleMouseOut(e) { 
    isDown = false; 
} 

function handleMouseMove(e) { 
    if (!isDown) { 
    return; 
    } 

    mouseX = parseInt(e.clientX - offsetCX); 
    mouseY = parseInt(e.clientY - offsetCY); 
    var dx = mouseX - cx; 
    var dy = mouseY - cy; 
    var angle = Math.atan2(dy, dx); 
    r = angle; 
    drawBackground(); 
} 

$("#canvas").mousedown(function(e) { 
    handleMouseDown(e); 
}); 
$("#canvas").mousemove(function(e) { 
    handleMouseMove(e); 
}); 
$("#canvas").mouseup(function(e) { 
    handleMouseUp(e); 
}); 
$("#canvas").mouseout(function(e) { 
    handleMouseOut(e); 
}); 

这里是我的jsfiddle：https://jsfiddle.net/rnhgqcw0/1/

我用这个代码的部分，这是我编辑的我的图片使用：http://jsfiddle.net/2bgypydj/

我的目标是能够把前景图像（大白色箭头），鼠标被按下时，鼠标被释放时被固定。我想我实施了我使用错误的代码。如果我手动更改变量“r”（角度）并运行代码，图像会转动。

任何帮助，将不胜感激。

Answer 1

范围

您的第一个问题是范围不正确的变量/函数的结果。看到这些错误（它们将出现在您的控制台）：

Uncaught ReferenceError: isDown is not defined

Uncaught ReferenceError: drawPijl is not defined

Uncaught ReferenceError: pijl is not defined

范围这三个正常。

逻辑

I don't think ctx.isPointInPath means what you think it means.如果能够研究是一个有价值的技能。请参阅MDN。

编码实践

$("#canvas").mousedown(function(e) { 
    handleMouseDown(e); 
}); 
$("#canvas").mousemove(function(e) { 
    handleMouseMove(e); 
}); 
$("#canvas").mouseup(function(e) { 
    handleMouseUp(e); 
}); 
$("#canvas").mouseout(function(e) { 
    handleMouseOut(e); 
}); 

可以很容易地冷凝为：

$("#canvas").mousedown(handleMouseDown); 
$("#canvas").mousemove(handleMouseMove); 
$("#canvas").mouseup(handleMouseUp); 
$("#canvas").mouseout(handleMouseOut); 

---

那些是你的主要问题。

快乐编码！

---

这里是一个example fiddle这样的作品，而且展示了更多的可能需要固定的东西。