在鼠標點擊中在畫布上繪制一個圓圈

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

Answer 1

我已經分叉並更新了你的小提琴以制作一個有效的例子： 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
    };
}