Javascript 在画布上画一个临时圆圈

我正在尝试创建一个画布，里面有一张图片，点击这里，就会创建一个圆圈，在一定时间内淡出

我对javascript完全是个新手，但到目前为止，我已经能够拼凑出这样的东西：一张有图片的画布，以及一个单击即可绘制圆圈的函数

我想有一个圆圈淡出，和一个功能，让用户删除最后一个圆圈。有什么办法吗

这是我的密码：

<section class="mbr-section mbr-section-nopadding mbr-figure--caption-outside-bottom" id="image1-1">
    <div class="mbr-figure">
        <img id="mave" height="0" src="assets/images/mave2.png">

<canvas id="imgCanvas" width="730" height="410" style="border:1px solid #d3d3d3;" onclick="draw(event)"></canvas>

<script>
window.onload = function() {
var c = document.getElementById("imgCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("mave");
ctx.drawImage(img,0,0);
}

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, 20, 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
    };
}
</script>

window.onload=函数（）{
var c=document.getElementById（“imgCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“mave”）；
ctx.drawImage（img，0,0）；
}
var canvas=document.getElementById（“imgCanvas”）；
var context=canvas.getContext（“2d”）；
功能图（e）{
var pos=getMousePos（画布，e）；
posx=pos.x；
posy=pos.y；
context.fillStyle=“#000000”；
context.beginPath（）；
arc（posx，posy，20,0,2*Math.PI）；
context.fill（）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}

一旦在画布上画出某样东西，它基本上就被遗忘了，只是一些像素而已。因此，如果您想与绘制的形状交互，则需要存储它们

您可以有一个包含圆形对象的圆形数组

var Circle = function (x, y, radius) {
    this.x = x; //Centre of the circle
    this.y = y; //Centre of the circle
    this.radius = radius;
};

var circlesArray = [];

然后，如果要添加圆，可以创建新的圆对象并将其添加到阵列中

circlesArray.push(new Circle(x, y, radius));

然后创建一个函数，在数组中循环并绘制每个圆

function drawCircles() {
    for (var i = 0; i < circlesArray.length; i++) {
        var circle = circlesArray[i];
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
        ctx.stroke();
        ctx.closePath();
    }
}

函数drawCircles（）{
对于（var i=0；i

然后，要删除绘制的最后一个圆，可以使用

circlesArray.pop（）

删除最后一个圆

删除最后一个圆后，可以使用

ctx.clearRect（0，0，c.width，c.height）清除画布

并调用

drawCircles（）

函数

---

下面是另一个问题中淡入淡出功能的一个很好的示例-

在画布中绘制后，像素位于画布上

如果您希望图像仍在那里，并且圆将消失，则需要继续绘制图像

setInterval(function(){
    draw();
},refreshRate);

当用户单击时，将圆的位置保存到数组中

绘制图像>绘制圆（通过圆阵列的数据绘制）

在圆淡出后，删除存储在阵列中的圆数据并绘制图像，则圆不会绘制。如果要删除最后一个圆，只需删除列表中的最后一项即可

<canvas id="imgCanvas" width="730" height="410" style="border:1px solid #d3d3d3;"></canvas>

<script>
//game config
var canvas=document.getElementById("imgCanvas");
var canvasContext = canvas.getContext('2d');
var ch = canvas.height;
var cw = canvas.width;

var c=document.getElementById("myCanvas");
var img = new Image();
img.src = "mave2.png";

var circleArray = new Array();

// functions
window.onload = function(){
    setInterval(function(){
        canvasContext.drawImage(img,0,0,cw,ch);
        drawArrayCircle();
    },500);

    canvas.addEventListener("mousedown", function (evt) {
        var mousePos = calculateMousePos(evt);
        handleClickButton(mousePos);
    });
};


function saveCircleData(pos){
    circleArray.push(pos);
    console.log(circleArray);
}

function fadeOutCircle(){

}

function drawArrayCircle(){
    for(i=0;i<circleArray.length;i++){
         console.log(circleArray[i]);
        if (circleArray[i] != null) {
            if (!circleArray[i].opacity) {
                circleArray[i].opacity=1;
            } 

            drawOneCircle(i);
        }
    }
}

function drawOneCircle(index) {

    posx = circleArray[index].x;
    posy = circleArray[index].y;
    canvasContext.fillStyle = "#000000";
    canvasContext.beginPath();
    canvasContext.globalAlpha = circleArray[index].opacity;
    circleArray[index].opacity= circleArray[index].opacity -0.1;
    if (circleArray[index].opacity < 0) {
        circleArray.splice(index, 1);
    }
    canvasContext.arc(posx, posy, 20, 0, 2*Math.PI);
    canvasContext.fill();
    canvasContext.globalAlpha = 1.0;
}

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

function handleClickButton(mousePos) {
    saveCircleData(mousePos);
}


function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX -rect.left - root.scrollLeft;
    var mouseY = evt.clientY -rect.top - root.scrollTop;
    return {
        x:mouseX,
        y:mouseY
    };
}

</script>

//游戏配置
var canvas=document.getElementById（“imgCanvas”）；
var canvasContext=canvas.getContext（'2d'）；
var ch=画布高度；
var cw=画布宽度；
var c=document.getElementById（“myCanvas”）；
var img=新图像（）；
img.src=“mave2.png”；
var circleArray=新数组（）；
//功能
window.onload=函数（）{
setInterval（函数（）{
canvasContext.drawImage（img，0,0，cw，ch）；
drawArrayCircle（）；
},500);
canvas.addEventListener（“鼠标向下”，函数（evt）{
var mousePos=calculateMousePos（evt）；
手柄点击按钮（鼠标点）；
});
};
功能saveCircleData（pos）{
循环推送（位置）；
控制台日志（circleArray）；
}
函数fadeOutCircle（）{
}
函数drawArrayCircle（）{
对于（i=0；i首先，您需要将圆存储在某个位置。

var循环=[]；

然后，您必须每N毫秒运行一次函数，以使圆圈褪色。

window.onload = function() {
    var c = document.getElementById("imgCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("mave");
    ctx.drawImage(img,0,0);
    setInterval(tick, 33);//this call
}

还有一个处理程序。

function tick(){
    draw();
}

然后修改
draw
功能。

function draw(e) {
    //clear the context
    context.clearRect(0, 0, canvas.width, canvas.height);
    //if we call it on click - create a new circle, add it to array
    if(e){
        var pos = getMousePos(canvas, e);
        circles.push({x : pos.x, y : pos.y, r : 20, alpha : 1});
    }
    //then fade out existing circles
    for(var i = circles.length - 1; i >= 0; i--){
        circles[i].alpha -= 0.005;
        if(circles[i].alpha <= 0){//cleanup dead ones
            circles.splice(i, 1);
            continue;
        }
        context.fillStyle = "rgba(0, 0, 0, " + circles[i].alpha + ")";
        context.beginPath();
        context.arc(circles[i].x, circles[i].y, circles[i].r, 0, 2*Math.PI);
        context.fill();
    }
}

功能图（e）{
//清除上下文
clearRect（0，0，canvas.width，canvas.height）；
//如果我们在单击时调用它-创建一个新的圆，将其添加到数组中
如果（e）{
var pos=getMousePos（画布，e）；
推圆（{x:pos.x，y:pos.y，r:20，alpha:1}）；
}
//然后淡出现有的圆圈
对于（var i=circles.length-1；i>=0；i--）{
圆[i].α-=0.005；
if（圆[i].alpha