javascript - 绘制 Canvas 后淡出线条？

Question

好的，我正在 Canvas 对象上绘制描边线，它工作正常我想做的是删除线条或在一段时间后淡出它们我一直在阅读有关保存状态和刷新的内容但是我似乎无法让它工作我也尝试过将 Canvas 上下文存储到一个数组中，并在它超过一定长度时从中拼接项目但再次没有运气...... 这是我的代码(很大，所以我设置了一个 plunkr ):

`var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
     $scope.canvas = $('#spiro')[0];
    $scope.canvascanvasContext =  $scope.canvas.getContext("2d");
    //interval
    $scope.timerId = 0;

    console.log($scope.canvas);
//MOUSE OVER
/*
$scope.getMousePos = function getMousePos(evt) {
    var rect = $scope.canvas.getBoundingClientRect();
    
      $scope.mouseX = evt.clientX - rect.left;
      $scope.mouseY = evt.clientY - rect.top;
      $scope.canvascanvasContext.fillStyle = "rgb("+$scope.red+", "+$scope.green+", "+$scope.blue+")";
      $scope.canvascanvasContext.fillRect($scope.mouseX, $scope.mouseY, 4, 4);
    

    console.log(evt.clientX);
}
  */
  $scope.clearit = function clearit(){
    // Store the current transformation matrix
  //  $scope.canvascanvasContext.save();

    // Use the identity matrix while clearing the canvas
    $scope.canvascanvasContext.setTransform(1, 0, 0, 1, 0, 0);
    $scope.canvascanvasContext.clearRect(0, 0, $scope.width, $scope.height);
    $scope.canvas.width = $scope.canvas.width;
  };
  $scope.randomColor = function randomColor(num) {return Math.floor(Math.random() * num);}
  $scope.canvascanvasContextArray = [];

  $scope.draw = function draw(e){
    $scope.now = new Date();
    $scope.sec = $scope.now.getMilliseconds();
    $scope.min = $scope.now.getMinutes();
    $scope.hr  = $scope.now.getHours();
        $scope.canvascanvasContext.beginPath();
        
        $scope.canvascanvasContext.arc(350, $scope.canvas.width/2,  $scope.canvas.width/2 ,0, 2 * Math.PI, true);

        $scope.canvascanvasContext.clip();


        $scope.canvascanvasContext.beginPath();


        $scope.Xmove = Math.floor((Math.random() * 345) - 1);
        $scope.Ymove = Math.floor((Math.random() * 345) - 1);
        $scope.quadracpx = Math.floor((Math.random() * 700) + 1);
        $scope.quadracpy = Math.floor((Math.random() * 700) + 1);
        $scope.quadrax = Math.floor((Math.random() * 700) + 1);
        $scope.quadray = Math.floor((Math.random() * 700) + 1);
        $scope.red = $scope.randomColor(255);
        $scope.green = $scope.randomColor(255);
        $scope.blue = $scope. randomColor(255);
        $scope.grd = $scope.canvascanvasContext.createLinearGradient($scope.quadracpx,$scope.quadracpy,$scope.quadrax,$scope.quadray);
          // Create color gradient
        $scope.grd.addColorStop(0,    "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0)");
        $scope.grd.addColorStop(0.15, "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0.1)");
        $scope.grd.addColorStop(0.33, "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0.1)");
        $scope.grd.addColorStop(0.49, "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0.2)");
        $scope.grd.addColorStop(0.67, "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0.3)");
        $scope.grd.addColorStop(0.84, "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+", 0.6)");
        $scope.grd.addColorStop(1,    "rgba("+$scope.red+", "+$scope.green+", "+$scope.blue+" , 1)");
        $scope.canvascanvasContext.strokeStyle = $scope.grd;
        $scope.canvascanvasContext.fillStyle = $scope.grd;
        $scope.canvascanvasContext.lineCap = 'round';
        $scope.canvascanvasContext.shadowBlur = 10;
        $scope.canvascanvasContext.shadowColor = "rgb("+$scope.red+", "+$scope.green+", "+$scope.blue+")";



     //   $scope.canvascanvasContext.moveTo(350,350);
        
     //         arc(x,y,r,start,stop)
      // Move registration point to the center of the canvas

     
      $scope.canvascanvasContext.translate($scope.canvas.width/2, $scope.canvas.width/2);
       $scope.canvascanvasContext.rotate(Math.PI/90);
        $scope.canvascanvasContext.translate(-$scope.canvas.width/2, -$scope.canvas.width/2);
        
     $scope.canvascanvasContext.arc(350, $scope.canvas.width/4,  $scope.canvas.width/10 ,350, 2 * Math.PI, true);
     
     

     //   $scope.canvascanvasContext.arc($scope.quadray, $scope.quadrax, $scope.quadracpy , $scope.Ymove, $scope.Xmove, true);
       // $scope.canvascanvasContext.arc($scope.Ymove, $scope.Xmove, $scope.quadracpy , $scope.quadracpx, $scope.quadray, true);

       // $scope.canvascanvasContext.quadraticCurveTo($scope.quadracpx,$scope.quadracpy,$scope.quadrax,$scope.quadray);



        $scope.canvascanvasContext.stroke();



        $scope.canvascanvasContextArray.push($scope.canvascanvasContext);

        
        
      if($scope.canvascanvasContextArray.length> 4){
        $scope.canvascanvasContext.save();
          var indexToRemove = 0;
          var numberToRemove = 1;

          $scope.canvascanvasContextArray.splice(indexToRemove, numberToRemove);
          $scope.canvascanvasContextArray[0].globalAlpha = 0;
        $scope.canvascanvasContext.restore();
      }

        console.log($scope.canvascanvasContextArray);
        console.log($scope.sec)

  };

  $scope.drawit = function drawit(){
    $scope.timerId = setInterval($scope.draw, 20);
    setInterval($scope.rotate, 40);


  };
$scope.rotate = function rotate(){
      /*$scope.canvascanvasContext.translate($scope.Xmove, $scope.Ymove);
        $scope.canvascanvasContext.rotate(Math.PI/45);
        $scope.canvascanvasContext.translate(-$scope.Xmove, -$scope.Ymove);*/
} 
  $scope.stopit = function stopit(){
      clearInterval($scope.timerId);
  };

});`

感谢任何花时间研究这个的人.. 克里斯

Answer 1

Live Demo

我个人的做法是将 fillStyle 设置为 RGBA，并将 alpha 设置为小于 1 的值，例如 0.2。

ctx.fillStyle = "rgba(255,255,255,0.2)";

每次填充 Canvas 时，您都在慢慢删除之前在其上绘制的内容。在下面的示例中，该函数每 200 毫秒调用一次，但您可以使用 alpha 值或超时值来获得所需的淡入淡出速度。

这是设置为 100 毫秒和 0.3 alpha 填充时的效果。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0;

canvas.width = canvas.height = 600;

canvas.onmousedown = function (e) {
    painting = !painting;

    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function (e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();

        lastX = mouseX;
        lastY = mouseY;
    }
}

function fadeOut() {
    ctx.fillStyle = "rgba(255,255,255,0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut,200);
}

fadeOut();