Использование холста globalAlpha для затухания - PullRequest
Новая
       1

Использование холста globalAlpha для затухания

0 голосов
/ 04 июля 2018

Я пытаюсь добавить содержимое одного холста в другой. Начиная со скрипта здесь у меня есть следующее, которое работает, но я не понимаю, почему исчезновение происходит так быстро - почему globalAlpha, кажется, почти полностью выцвела новое изображение после всего лишь 0,2 операции? Скрипт ниже и здесь на jsbin . 

<canvas id="main" width="500" height="300"></canvas>
<canvas id="test" width="500" height="300"></canvas>

<script>

var width = 500, height = 300;

var main = document.getElementById('main');
var mainctx = main.getContext('2d');

//begin path, create a rect the size of the canvas
mainctx.beginPath();
mainctx.rect(0, 0, width, height);
mainctx.fillStyle = "#ff0000";
mainctx.fill();

var test = document.getElementById('test');
var testctx = test.getContext('2d');

//begin path, create a rect the size of the canvas
testctx.beginPath();
testctx.rect(0, 0, width, height);
testctx.fillStyle = "#00ff00";
testctx.fill();

var op = 1;

function fade()
{
    op -= 0.001;

    console.log(op);

    //mainctx.clearRect(0, 0, width, height);
    mainctx.globalAlpha = 1 - op;
    mainctx.drawImage(testctx.canvas, 0, 0);

    if (op <= 0.8) setTimeout(function(){ console.log("done"); }, 1);
    else requestAnimationFrame(fade);
}

fade();

</script>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Благодаря предложению @ Kaiido о третьем полотне и ответу @Soul_man в этом посте У меня появилась идея, которая, кажется, работает хорошо. Вместо того, чтобы держать исходное изображение на третьем холсте (казалось громоздким, но, возможно, я ошибаюсь - может быть, это хуже в памяти?) Теперь я сохраняю исходное изображение с помощью getImageData и записываю его в холст в каждом цикле, прежде чем писать в новом изображении все выше и выше уровень непрозрачности. Сценарий ниже и здесь jsbin . 

<canvas id="main" width="500" height="300" style="border: 1px solid #ff0000;"></canvas>
<canvas id="test" width="500" height="300" style="border: 1px solid #ff0000;"></canvas>

<script>

var width = 500, height = 300, text = "hello";


var main = document.getElementById('main');
var mainctx = main.getContext('2d');

//begin path, create a rect the size of the canvas
mainctx.beginPath();
mainctx.rect(0, 0, width, height);

//percentage to hex colour and fill canvas rect
mainctx.fillStyle = "#ff0000";
mainctx.fill();

//write text to canvas
mainctx.font = 'Bold 100px Arial';
mainctx.textAlign="center";
mainctx.textBaseline = "middle";
mainctx.fillStyle = '#ffffff';
mainctx.fillText(text, 0 + (width / 2), 0 + (height / 2));


var test = document.getElementById('test');
var testctx = test.getContext('2d');

//begin path, create a rect the size of the canvas
testctx.beginPath();
testctx.rect(0, 0, width, height);

//percentage to hex colour and fill canvas rect
testctx.fillStyle = "#00ff00";
testctx.fill();

//start opacity at 0
var op = 0;

//copy the existing main canvas image into memory
var originalimage = mainctx.getImageData(0, 0, width, height);


//fade canvas
function fade()
{
    //place the original image
    mainctx.putImageData(originalimage, 0, 0);

    //starting at 0 set the global alpha and then draw the new image
    mainctx.globalAlpha = op;
    mainctx.drawImage(testctx.canvas, 0, 0);

    //increment
    op += 0.01;

    if (op >= 1.0) setTimeout(function(){ console.log("done"); }, 2000);
    else requestAnimationFrame(fade);
}

fade();

</script>
0 голосов
/ 04 июля 2018

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

Все, что вам нужно сделать, это удалить // перед функцией clearRect 

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>

   <canvas id="main" width="500" height="300"></canvas>
   <canvas id="test" width="500" height="300"></canvas>

  <script>

  var width = 500, height = 300;
  var main = document.getElementById('main');
   var mainctx = main.getContext('2d');

  //begin path, create a rect the size of the canvas
  mainctx.beginPath();
   mainctx.rect(0, 0, width, height);
  mainctx.fillStyle = "#ff0000";
   mainctx.fill();

  var test = document.getElementById('test');
  var testctx = test.getContext('2d');

  //begin path, create a rect the size of the canvas
  testctx.beginPath();
  testctx.rect(0, 0, width, height);
  testctx.fillStyle = "#00ff00";
  testctx.fill();

  var op = 1;

  function fade()
  {
      op -= 0.001;

      console.log(op);

          //you already had it here, i only had to remove the "//"
      mainctx.clearRect(0, 0, width, height);
      mainctx.globalAlpha = 1 - op;
          mainctx.drawImage(testctx.canvas, 0, 0);

      if (op <= 0.1) setTimeout(function(){ console.log("done"); }, 1);
      else requestAnimationFrame(fade);
  }

  fade();

  </script>

  </body>

</html>

https://jsbin.com/yulekoxuza/edit?html

Надеюсь, это поможет;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...