绘制画布后淡出线条? [英] fade out lines after drawing canvas?

问题描述

好吧，我正在画布对象上绘制笔触线，可以正常工作.我想做的是在阅读有关保存状态和刷新的一定时间后，删除这些线条或淡出它们，但是我似乎无法使它正常工作，我也曾尝试将画布上下文存储到数组中，并在其超过一定长度时从中拼接项目，但再次失败了…… 这是我的代码(非常庞大，因此我设置了 plunkr ):

Ok I'm drawing stroke lines on a canvas object which is working ok what I'd like to do is to remove the lines or fade them out after a certain time I've been reading about saving the state and refreshing but I can't seem to get it to work I've also tried storing the canvas context to a array and splicing the items from it when it get's over a certain length but again to no luck... here's my code (which is huge so I've set up a 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);
  };

});`

感谢所有花时间研究此问题的人. 克里斯

Thank you to anybody who takes the time to look into this.. Chris

推荐答案

实时演示

个人而言，我将fillStyle设置为RGBA并将alpha设置为小于1的值，例如0.2.

Live Demo

Personally how I do it is I set the fillStyle to RGBA and set the alpha to something under 1, like 0.2 for example.

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

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

Every time you then fill the canvas you are slowly erasing what was drawn on it prior. In the example below the function is called every 200ms but you can play with the alpha value, or the timeout value to get the fade speed you need.

这是设置为100ms和0.3 alpha填充时效果的外观.

This is how the effect looks when set to 100ms, and 0.3 alpha fill.

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

这篇关于绘制画布后淡出线条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！