Javascript 绘制画布后淡出线条？_Javascript_Html_Angularjs_Canvas

Javascript 绘制画布后淡出线条？

javascript html angularjs canvas

Javascript 绘制画布后淡出线条？,javascript,html,angularjs,canvas,Javascript,Html,Angularjs,Canvas,好的，我正在画布对象上绘制笔划线，它正在工作，好的，我想做的是在我读到关于保存状态和刷新的内容后，删除线条或淡出它们，但我似乎无法使其工作，我还尝试将画布上下文存储到数组中，并在它结束后从中拼接项目一定的长度，但再次没有运气。。。以下是我的代码（这是一个巨大的代码，所以我设置了一个）：感谢所有花时间调查此事的人。。 Chris每个画布元素只有一个上下文，因此在一个数组中保存多个上下文不会有任何作用——它只会多次保存一个上下文这里有一种画“消失”线的方法：将每个鼠标坐标（从mousemo

好的，我正在画布对象上绘制笔划线，它正在工作，好的，我想做的是在我读到关于保存状态和刷新的内容后，删除线条或淡出它们，但我似乎无法使其工作，我还尝试将画布上下文存储到数组中，并在它结束后从中拼接项目一定的长度，但再次没有运气。。。以下是我的代码（这是一个巨大的代码，所以我设置了一个）：

感谢所有花时间调查此事的人。。

Chris

每个画布元素只有一个上下文，因此在一个数组中保存多个上下文不会有任何作用——它只会多次保存一个上下文

这里有一种画“消失”线的方法：

将每个鼠标坐标（从mousemove）保存在点阵列中
创建将这些点绘制为直线的绘制函数
在动画循环中执行绘图功能
通过动画的每个循环，不必从点阵列的起点绘制另一个点

示例代码和演示：


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.lineCap=“圆形”；
ctx.lineJoin=“圆形”；
ctx.线宽=4；
ctx.strokeStyle=“蓝色”；
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=假；
var-startX；
var startY；
var点=[]；
var s=0；
制作动画（）；
函数drawLatestLines（）{
s+=0.50；
var ss=parseInt（s）；
如果（s>points.length-2）{return；}
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
移动到（点[ss].x，点[ss].y）；
对于（var i=ss；i
我个人的做法是将fillStyle
设置为RGBA，并将alpha设置为1以下的值，例如0.2
ctx.fillStyle=“rgba（255255255,0.2）”；

每次填充画布时，您都会慢慢擦除之前在画布上绘制的内容。在下面的示例中，该函数每200ms调用一次，但您可以使用alpha值或超时值来获得所需的淡入速度
这是设置为100ms和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();


<!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>

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