2
我想画在画布填充(或不填充)的圆上点击鼠标,但我不能让我的代码都正常工作,我尝试了几乎一切!绘制在画布的圆圈上点击鼠标
这是我的HTML:
<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"></canvas>
和我目前的脚本:
var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
function createImageOnCanvas(imageId) {
canvas.style.display = "block";
document.getElementById("images").style.overflowY = "hidden";
var img = new Image(300, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}
function draw(e) {
var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = "#000000";
context.arc(posx, posy, 50, 0, 2 * Math.PI);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
我想我的问题是function draw(e)
,即使我感到非常有信心的那部分。
这里是jsFiddle
将方便地指出确切的更改,如从'画(E)在'onclick'变化'来'画(事件)'并确定所做的确切更改。如果发生了小提琴改变或脱机这否则将没有意义。 – Nope
您好,谢谢您的回答!这不起作用,因为我使用“严格使用”;命令,禁用整个脚本,是啊,你知道这笔交易。我开始这整个事情有点不对了和我很抱歉,我很着急。 我寻找绕过了“使用严格”的替代解决方案;事情。 @ankr –
我不知道哪一部分,不会是严格模式兼容。你能提供错误信息吗? – ankr