单击鼠标在画布上绘制一个实心圆

Drawing a filled circle in a canvas on mouseclick

本文关键字：一个 鼠标 绘制 单击      更新时间：2023-09-26

我想在鼠标点击时在画布上画一个填充（或未填充）的圆圈，但我无法使代码正常工作，我几乎已经尝试了所有方法！

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

如果并且仅当我删除"use strict"；，但在这项任务中，我必须制作一个即使使用它也能工作的代码，这是我的问题。

这是jsFiddle

自己解决了。

function draw(e) {
    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var rect = canvas.getBoundingClientRect();
    var posx = e.clientX - rect.left;
    var posy = e.clientY - rect.top;
    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(posx, posy, 50, 0, 2 * Math.PI);
    context.fill();
}

这个脚本对我来说很好。

相关文章：