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

用户点击时，将圆圈的位置保存到数组中。

绘制图像＆gt;绘制圆圈（由圆阵列数据绘制）

圆圈淡出后，删除存储在数组中的圆形数据并绘制图像，然后圆圈将不会绘制。如果要删除最后一个圆圈，只需删除列表中的最后一项。

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

在画布中绘制临时圆圈

3 个答案: