0

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

我想让它变得简单。我只是想画然后抹掉最近画的笔触。我从哪说起呢？有没有不使用任何插件在画布上绘画的简单方法？我目前正在使用 wPaint.js，但这并不是我真正想要的。有没有一种在画布上绘画和撤消而无需太多复杂代码的方法？

4

2 回答 2

2

下面是如何让用户画一条自我消失的线：

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

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

但是每个循环都忽略最早的点（使最早的点“消失”）。

这是代码和小提琴：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 允许的时间，您需要“缓存”效果：

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

然后，不要使用 context.lineTo 或即时喷涂，只需执行以下操作：

context.drawImage(myCachedSprays[nextSprayIndex],point.x,point.y);
于 2013-11-14T18:49:28.877 回答
0

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

于 2013-11-14T11:18:30.630 回答