在鼠标点击时在画布上绘制一个圆形

Question

我希望在鼠标单击时在画布上绘制一个填充（或非填充）圆形，但我无法使代码正常工作，我已经尝试了几乎所有方法！

这是我的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。

- Davy Karlsson

Answer 1

我已经复制并更新了您的fiddle示例，以创建一个可工作的示例：http://jsfiddle.net/ankr/ds9s7/161/

除了其他人指出的事件引用不正确之外，您在绘制时也没有开始或结束路径。添加了context.beginPath()和context.fill()调用

以下是相关的JS代码

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

function draw(e) {
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(posx, posy, 50, 0, 2*Math.PI);
    context.fill();
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

- ankr

---

指出确切的更改会很方便，例如在onclick中从draw(e)更改为draw(event)并确定所做的确切更改。如果fiddle发生更改或离线，否则这将毫无意义。 - Nope

你好，感谢你的回答！但是这并不起作用，因为我正在使用“use strict”命令，它会禁用整个脚本，你知道的。我开始时有些错误，很抱歉，我当时很匆忙。 我正在寻找一种绕过“use strict”限制的替代解决方案。@ankr - Davy Karlsson

我不确定哪一部分不符合严格模式的规范。你能提供错误信息吗？ - ankr

你好，@ankr或者其他人，能否更新一下这个fiddle？现在链接已经失效了...谢谢！ - Gregdebrick