Как изменить прозрачность кругов на холсте - PullRequest
Новая
       67

Как изменить прозрачность кругов на холсте

1 голос
/ 28 мая 2020

Итак, я пытаюсь создать несколько кругов на своем холсте и индивидуально изменить прозрачность каждого из них. Вот то, что я пробовал до сих пор, я знаю, что определенно помещаю интервал не в то место, но меня очень смущает, как именно работают эти холсты: 

function makeCircle(x,y)
{
 canvas.beginPath();
 canvas.arc(x, y, 20, 0, 2 * Math.PI);
 color = generateRandomColor();
 canvas.fillStyle = color;
 canvas.fill();
 canvas.lineWidth = 0;
 canvas.strokeStyle = color;
 setInterval(function()
            { 
                if(canvas.globalAlpha>=.05)
                {
                    canvas.globalAlpha-=.05;
                    console.log("here");
                }
                else
                {
                    canvas.globalAlpha = 0;
                    console.log(canvas.globalAlpha);
                    clearInterval();
                }
            }, 2000)
 canvas.stroke();
}

Это не меняет непрозрачность кругов вообще, насколько я могу судить.

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Есть несколько вещей:

  • ваша переменная canvas - это не холст, а контекст. Переименуйте его, чтобы избежать путаницы (обычно используется ctx).
  • clearInterval принимает параметр: ссылку на интервал для очистки. Поместите его в переменную и используйте.
  • вы ничего не рисуете внутри своего интервала. Вам нужно сделать ctx.fill() внутри него.
  • даже с этим изменением вы будете рисовать только поверх ранее нарисованных кругов (и не увидите никаких изменений). Как только вы что-то нарисовали, холст представляет собой набор пикселей. Поэтому, если вы хотите получить часть того, что было за кругом (по прозрачности), вам нужно очищать холст и начинать заново на каждом интервале (перерисовывать то, что было раньше, прежде чем вы добавили круг). В приведенной ниже демонстрации я сохраняю изображение перед рисованием первого круга и восстанавливаю его на каждой итерации, но если в вашем варианте использования одновременно происходят другие вещи, вы можете фактически перерисовать каждый элемент по отдельности. 

var canvas = document.querySelector('canvas'),
    ctx    = canvas.getContext("2d");

function makeCircle(x, y) {
  // Save the background
  var bg = ctx.getImageData(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, 2 * Math.PI);
  color = '#f00'; // For the demo
  ctx.fillStyle = color;
  ctx.fill();
  var timer = setInterval(function() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Redraw the background
    ctx.putImageData(bg, 0, 0);
    if (ctx.globalAlpha >= .05) {
      ctx.globalAlpha -= .05;
      ctx.fill();
    } else {
      ctx.globalAlpha = 0;
      clearInterval(timer);
    }
  }, 50);
}

ctx.fillRect(50, 50, 30, 100); // For the demo
makeCircle(50, 50);
<canvas></canvas>
1 голос
/ 28 мая 2020

Не уверен, что вы пытаетесь сделать с этим вложенным setInterval или зачем его вообще использовать ...

Вот что я бы сделал: 

function makeCircle(x, y, color, alpha) {
  canvas.beginPath();
  canvas.globalAlpha = alpha
  canvas.arc(x, y, 20, 0, 2 * Math.PI);
  canvas.fillStyle = color;
  canvas.fill();
}


var canvas_doc = document.getElementById("canvas");
var canvas = canvas_doc.getContext("2d");

makeCircle(20, 20, "red", 0.5)
makeCircle(30, 30, "blue", 0.5)
makeCircle(50, 50, "green", 0.9)

makeCircle(120, 20, "red", 1)
makeCircle(180, 30, "blue", 1)
makeCircle(150, 50, "green", 1)
<canvas id="canvas"></canvas>

Просто, правда? Я просто добавил к функции еще несколько параметров, чтобы передать цвет и альфа-канал. Таким образом, мы можем с легкостью нарисовать несколько цветных кругов.



Вы хотите создать какую-то анимацию, используя globalAlpha ... Мы можем использовать для этого setInterval, вот пример: 

function makeCircle(x, y, color, alpha) {
  canvas.beginPath();
  canvas.globalAlpha = alpha
  canvas.arc(x, y, 20, 0, 2 * Math.PI);
  canvas.fillStyle = color;
  canvas.fill();
}

var globalAlpha = 0.1
function draw() {
  globalAlpha += 0.02
  if (globalAlpha > 2) 
    globalAlpha = 0.1
    
  canvas.clearRect(0,0 , 999, 999)
  makeCircle(20, 20, "red", globalAlpha)
  makeCircle(30, 30, "blue", globalAlpha)
  makeCircle(50, 50, "green", globalAlpha)

  makeCircle(120, 20, "red", 1)
  makeCircle(130, 30, "blue", 1)
  makeCircle(150, 50, "green", 1)
}

var canvas_doc = document.getElementById("canvas");
var canvas = canvas_doc.getContext("2d");

setInterval(draw, 50)
<canvas id="canvas"></canvas>
...