在畫布上繪制臨時圓

Question

我正在嘗試創建一個畫布，其中包含圖片，在單擊時會創建一個圓圈，以便在一定時間內淡出。

我是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>

Answer 1

一旦在畫布上繪制了一些東西，它實際上就被遺忘了，僅僅是一些像素。 因此，如果要與繪制的形狀進行交互，則需要存儲它們。

您可能有一個包含圓形對象的圓形數組。

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();
    }
}

然后，要刪除繪制的最后一個圓，可以使用circlesArray.pop()刪除最后一個圓。

刪除最后一個圓后，您可以使用ctx.clearRect(0, 0, c.width, c.height);清除Canvas ctx.clearRect(0, 0, c.width, c.height); 並調用drawCircles()函數。

這是另一個問題的淡入淡出功能的一個很好的例子- 如何淡出畫布中的項目

Answer 2

繪制后在畫布中，像素在畫布上。

如果您希望圖像仍然存在並且圓圈會消失，則需要繼續繪制圖像。

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>

Answer 3

首先，您需要將圈子存儲在某個地方。
var circles = [];

然后，您必須每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();
    }
}