使用画布平滑随机线

Question

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.canvas.width  = window.innerWidth;
context.canvas.height  = window.innerHeight;
var x1 = Math.random()*context.canvas.width;
var y1 = Math.random()*context.canvas.height;
var xdir = 0; var ydir = 0;
context.beginPath();

setInterval(function(){
    for (var i = 0; i < 10; i++) {
        randx = Math.random(); randy = Math.random();

        if (randx > 0.95) {
            if (xdir < 0) xdir = (xdir+((Math.random()*1.5) - 1))/2;
            else if (xdir > 0) xdir = (xdir+((Math.random()*1.5) - 0.5))/2;
            else xdir = (Math.random()*1.5) - 0.75;
        }

        if (randy > 0.95) {
            if (ydir < 0) ydir = (ydir+((Math.random()*1.5) - 1))/2;
            else if (ydir > 0) ydir = (ydir+((Math.random()*1.5) - 0.5))/2;
            else ydir = (Math.random()*1.5) - 0.75;
        }

        context.lineTo(x1+xdir, y1+ydir);
        context.stroke();

        x1 = x1+xdir;
        y1 = y1+ydir;
    }
},50);

这是我的随机行脚本，但是我的行确实很丑陋： http : //i.stack.imgur.com/YZT2o.png

有什么更好的方法可以使用画布实现线条流畅吗？

Answer 1

HTML5 Canvas 上的行在所有浏览器/ OS（AFAIK）上都很好地抗锯齿。 但是，在具有每个循环10冲程的更新回调中，您既没有清除画布也没有清除路径 ，因此您每秒在其自身上绘制同一路径200次 。 这导致所有抗锯齿被破坏，因为即使最微弱的不透明像素也会堆积起来，直到它们成为实线。

使代码看起来更漂亮的最简单解决方法是添加以下行：

context.clearRect(0,0,context.canvas.width,context.canvas.height);

在您的for循环中，例如，在context.stroke();之前context.stroke(); 。

此单行更改使它看起来不错，但对性能不利，对于每次视觉更新，清理和重绘画布十次。

这是一个更好的选择：

context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x1+xdir, y1+ydir);
context.stroke();

x1 += xdir; y1 += ydir;

这样，您将永远不会清除画布，而只会在每帧中绘制更改的线条。

另一种替代方法（如果需要始终提供完整路径）是在一个高速setInterval循环中累积对上下文路径的更改，而在另一种较慢的循环中，偶尔清除画布并重新绘制整个路径。 这类似于我为Langton（非常快）的Ant仿真所做的工作。

Answer 2

看一下这个问题：

在画布（HTML5）上绘制好看的线条（如Flash中的线条）-可以吗？