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

Painting On A Canvas And Deleting It Automatically (HTML5)

本文关键字：删除 HTML5 绘画      更新时间：2023-09-26

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

我想让它变得简单。我只是想画画，然后抹去最近画的笔触。我从哪里开始？有没有一种简单的方法可以在不使用任何类型的插件的情况下在画布上绘画？我目前正在使用wPaint.js这不是我真正想要的。有没有一种方法可以在画布上绘画并在没有太多复杂代码的情况下撤消？

下面介绍如何让用户绘制一条自我消失的线：

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

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

但是每个循环，都省略了最早的点（使最早的点"消失"）。

这是代码和小提琴：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 数学随机，
  • 10 X 数学和
  • 10 X 数学罪。

下面是一个"喷漆"效果的例子：http://jsfiddle.net/m1erickson/zJ2ZR/

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

在折线的 20-50 个累积点上的每一个点上进行昂贵的喷漆可能不适合 RAF 框架的时间。

为了使喷漆适合RAF允许的时间，您需要"缓存"效果：

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

然后，不要在上下文中或即时喷漆，只需执行以下操作：

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

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

相关文章：