Zeichne temporären Kreis in Leinwand

Question

Ich versuche, eine Leinwand zu erstellen, mit einem Bild darin, wo beim Klicken ein Kreis erstellt wird, um über eine bestimmte Zeit auszublenden.

Ich bin ein totaler Neuling für Javascript, aber das ist, was ich in der Lage war, bis jetzt zusammen zu combble: eine Leinwand mit dem Bild darin, und eine Funktion, um einen Kreis auf Klick zu zeichnen.

Ich möchte den Kreis ausblenden lassen, und eine Funktion, mit der der Benutzer den letzten Kreis löschen kann. Irgendwelche Ideen, wie man das macht?

Hier ist mein Code:

<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

Sobald etwas auf die Leinwand gezogen wird es im wesentlichen um vergessen und ist nur ein paar Pixel. Wenn Sie also mit den gezeichneten Formen interagieren möchten, müssen Sie sie speichern.

Sie könnten ein Array von Kreisen haben, die Kreisobjekte enthalten.

Wenn Sie einen Kreis hinzufügen möchten, können Sie ein neues Kreisobjekt erstellen und es zum Array hinzufügen.

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

Dann sie zeichnen Sie eine Funktion erstellen, die durch die Array-Loops und jeden Kreis zeichnen

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

Dann den letzten Kreis zu löschen, die gezogen wurde, um Sie circlesArray.pop() verwenden könnten den letzten Kreis zu entfernen. Nachdem der letzte Kreis entfernt wurde, können Sie den Canvas mit ctx.clearRect(0, 0, c.width, c.height); löschen und die Funktion drawCircles() aufrufen.

ist hier ein gutes Beispiel für eine Fade-Funktion aus einer anderen Frage - How to fade out an item in canvas

Answer 2

In Leinwand, nachdem Sie zeichnen, die Pixel auf der Leinwand sind.

Wenn Sie möchten, dass das Bild immer noch da ist und der Kreis verschwindet, müssen Sie weiterhin das Bild zeichnen.

Wenn Benutzer klicken, speichern Sie die Position des Kreises in einem Array.

draw image> Kreis zeichnen (die durch die Daten des Kreis Array zeichnen)

nach dem Kreis ausgeblendet, entfernen Sie die Kreisdaten, die in dem Array gespeichert ist, und um das Bild zu zeichnen, dann wird der Kreis nicht ziehen. Wenn Sie den letzten Kreis entfernen möchten, entfernen Sie einfach das letzte Element der Liste.

<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

Zuerst müssen Sie die Kreise irgendwo speichern.
var circles = [];

Dann müssen Sie alle N Millisekunden eine Funktion ausführen, damit die Kreise verblassen.

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 
} 

Und ein Handler.

function tick(){ 
    draw(); 
} 

dann die draw Funktion ändern.

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