Question

这是我的目标。我想在画布元素上绘画，然后以快速渐进的方式自动擦除它。类似的实现有点像这样：http://mario.ign.com/3D-era/super-mario-sunshine

我想简单一点。我只是想画画然后擦掉最近画过的笔画。我从哪里开始？是否有一种简单的方法在画布上绘画而不使用任何类型的插件？我目前正在使用wPaint.js，这不是我想要的。是否有一种在画布上绘画并在没有太多复杂代码的情况下撤消的方法？

Answer 1

以下是如何让用户绘制自我消失的行：

当用户拖动鼠标时，通过将点保存到数组来创建折线。

在动画循环中，清除屏幕并重绘该折线。

但是每个循环都会遗漏最早的点（使最早的点“消失”）。

这是代码和小提琴：http://jsfiddle.net/m1erickson/LT6Ln/

<!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(){

    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();


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

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;
    var points=[];
    var minPoint=0;
    var PI2=Math.PI*2
    var radius=20;
    var fps = 20;
    var lastTime=0;

    animate();

    function animate() {
      setTimeout(function() {

        requestAnimFrame(animate);

        // draw a polyline using the saved points array
        // but start later in the array each animation loop
        if(minPoint<points.length){
            ctx.clearRect(0,0,canvas.width,canvas.height)
            ctx.beginPath();
            ctx.moveTo(points[minPoint].x,points[minPoint.y]);
            for(var i=minPoint+1;i<points.length;i++){
                var pt=points[i];
                ctx.lineTo(pt.x,pt.y);
            }
            ctx.stroke();
            minPoint++;
        }
      }, 1000 / fps);

    }

    function handleMouseDown(e){
      isDown=true;
    }

    function handleMouseUp(e){
      isDown=false;
    }

    function handleMouseOut(e){
      isDown=false;
    }

    function handleMouseMove(e){
        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        // accumulate points for the polyline but throttle 
        // the capture to prevent clustering of points
        if(Date.now()-lastTime>20){
            points.push({x:mouseX,y:mouseY});
            lastTime=Date.now();
        }
    }

    $("#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>
    <h3>Drag to create a self-clearing line.</h3>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[更新：使用复杂效果代替简单的线条]

不确定。您可以使用喷涂效果而不是线条。

然而，这种效果需要一些昂贵的处理！

喷涂效果通常是通过在中心点周围绘制多个随机1x1像素来创建的。

假设每个“喷雾”有10个液滴，则折线上的每个点都需要：

10 X fillRect（x，y，1,1）在画布上绘制（而不是简单线的1 X lineTo）。
20 X Math.random，
10 X Math.cos和
10 X Math.sin。

以下是“喷雾”效果的示例：http://jsfiddle.net/m1erickson/zJ2ZR/

请记住，所有这些处理必须在requestAnimationFrame允许的较小时间内进行（通常每帧16-50毫秒）。

沿着折线在20-50个累积点的每一个上做一个昂贵的喷涂，可能不适合RAF框架的时间。

为了在RAF允许的时间内完成喷涂，你需要“缓存”效果：

在10px x 10px的屏幕外画布上创建1个随机“喷雾”。
使用canvas.toDataURL从该画布创建图像。
将该图像添加到数组中。
重复步骤＃1可能十几次（以获得各种各样的随机喷雾图像）

然后代替context.lineTo或动态喷涂，只需这样做：

context.drawImage(myCachedSprays[nextSprayIndex],point.x,point.y);

Answer 2

使用Kinetic.js。它很容易学习。通过这种方式，您可以非常轻松地添加或删除任何绘制的笔划。从这里查看它的工作情况：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-batch-draw/

在画布上绘画并自动删除（HTML5）

2 个答案: