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上的行在所有浏览器/操作系统（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模拟所做的类似。

Answer 2

看看这个问题：

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

使用Canvas平滑随机线

2 个答案: