使用 Canvas 平滑随机线答案

【问题标题】：Smooth random line using Canvas使用 Canvas 平滑随机线
【发布时间】：2011-08-01 11:17:19
【问题描述】：

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

有没有更好的方法来使用画布实现流畅的线条？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

看看这个问题：

Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

【讨论】：

【解决方案2】：

HTML5 Canvas 上的线条在所有浏览器/操作系统 (AFAIK) 上都很好地消除了锯齿。但是，在每循环 10 次的更新回调中，您既不是 clearing your canvas 也不是 clearing your path，因此 您每秒在自身之上绘制相同的路径 200 次。这会导致所有的抗锯齿功能都被破坏，因为即使是最微弱的不透明像素也会累积直到它们变成实线。

让您的代码看起来更漂亮的最简单的修复方法是添加以下行：

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

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

这一行的改变让它看起来不错，但对性能不利，每次视觉更新都会清除和重绘画布 10 次。

这里有一个更好的选择：

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

x1 += xdir; y1 += ydir;

这样你永远不会清除画布，而是在每一帧只绘制改变的线条。

另一种选择（如果您需要始终可用的完整路径）是在一个高速 setInterval 循环中累积对上下文路径的更改，并在另一个较慢的循环中偶尔清除画布并重新描边整个路径。这与我为 Langton's (Very Fast) Ant 模拟所做的类似。

【讨论】：