繪製臨時圈帆布

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);清除畫布並調用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(); 
    } 
}