绘制画布后如何使线条逐渐消失？

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

});`

感谢任何花时间查阅这篇文章的人.. 克里斯

- vimes1984

Answer 1

演示实例

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

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

每次填充画布时，都会逐渐擦除之前绘制的内容。在下面的示例中，该函数每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();

- Loktar

Answer 2

每个canvas元素只有1个上下文，因此将多个上下文保存在数组中不会起到任何作用——它只是多次保存1个上下文。

这是一种绘制“消失”线的方法：

- 将每个鼠标坐标（来自mousemove）保存在一个points数组中。 - 创建一个绘图函数，将这些点画成一条线。 - 在动画循环中执行绘图函数。 - 每次循环通过动画时，跳过从points数组开头绘制另一个点。

示例代码和演示：http://jsfiddle.net/m1erickson/LSL68/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.lineWidth=4;
    ctx.strokeStyle="blue";

    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var startX;
    var startY;

    var points=[];
    var s=0;
    animate();

    function drawLatestLines(){
        s+=0.50;   
        var ss=parseInt(s);
        if(s>points.length-2){return;}
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(points[ss].x,points[ss].y);
        for(var i=ss;i<points.length;i++){
            ctx.lineTo(points[i].x,points[i].y);        
        }
        ctx.stroke();
    }

    function animate(){
        requestAnimationFrame(animate);
        drawLatestLines();
    }

    function handleMouseDown(e){
      e.preventDefault();
      e.stopPropagation();

      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      points.length=0;
      points.push({x:startX,y:startY});
      s=0;
      isDown=true;

    }

    function handleMouseUp(e){
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseOut stuff here
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      points.push({x:mouseX,y:mouseY});

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <h4>drag the mouse quickly to draw disappearing line.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

- markE