キャンバスにテンポラリサークルを描く

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.pop()を使用することができ描かれた最後の円を削除するには、次に

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.push(new Circle(x, y, radius)); 

。

最後の円が削除されたら、ctx.clearRect(0, 0, c.width, c.height);でキャンバスを消去し、drawCircles()関数を呼び出すことができます。ここで

は別の質問からフェード機能の良い例です - あなたが描くの後にキャンバスにHow to fade out an item in canvas

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