如何使用svg/canvas绘制不规则/手绘线条？

Question

我想画一条垂直线，它可以根据页面内容进行调整大小，但是看起来像手绘的，而不是直线。

我目前考虑使用SVG或Canvas来实现这一点。该线将沿着网页的一侧运行，因此需要在容器的顶部和底部之间进行可扩展性。我该如何实现这个目标？

- Jeepstone

---

听起来有点棘手。你确定不能使用重复的背景图片吗？ - nkorth

仅仅重复y将意味着除非你落在图案的末尾，否则会有一些点不对齐。 - Jeepstone

这只是用触控板绘制的，但我能够使用GIMP中的Shear工具使其正常工作：http://jsfiddle.net/nkorth/K6r3u/embedded/result/ - nkorth

Answer 1

所以你想用抖动来画一条线？

尝试绘制一系列连续的贝塞尔曲线，其中所有Y轴点部分等间距，并通过某些量随机化x值。

这里有一个示例供您参考：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

function addJitteryBezier(fromx, fromy, tox, toy) {
 var diffx = tox - fromx;
 var diffy = toy - fromy;
 
 var neg = Math.random()*diffy/5; // so the x value can go positive or negative from the typical
    
    
 ctx.bezierCurveTo(
 -neg + fromx + 2*(Math.random()*diffy/8), fromy + .3*diffy,
 -neg + fromx + 2*(Math.random()*diffy/8), fromy + .6*diffy,
 tox, toy
 );   
}

ctx.beginPath();
ctx.moveTo(50,0);

var i = 0;
while (i < 500) {
    addJitteryBezier(50, i, 50, i+50);
    i+=  50;
}

ctx.stroke();

<canvas id="canvas1" width="500" height="500"></canvas>

http://jsfiddle.net/GfGVE/9/

- Simon Sarris

---

正是我刚开始尝试的，但我已经有一段时间没有编写Canvas了。 - nkorth

完美的例子，Simon。非常感谢。我还发现了http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5，这个还不错。唯一的问题是，当线条相遇时，曲线会形成一个峰。 - Jeepstone

是的，有一些方法可以解决这个问题... 如果曲线的最后一个控制点具有非常负面的X值，则您将希望下一个曲线的第一个控制点具有正值。因此，您可以进行一些额外的检查，并确保第二条曲线的第一个控制点始终是相反的符号。如果听起来令人困惑，我可以修改我的示例以显示。 - Simon Sarris

如果我想要为这条线条添加动画效果，我是否需要在while()循环中使用setInterval()函数？那样是正确的吗？ - Jeepstone

嗯，你可以用几种方法来实现动画效果，但在我看来最好的方法是这样的：首先将整条线绘制到内存画布中。然后逐渐将该画布绘制到真实画布上。以下是一个示例：http://jsfiddle.net/GfGVE/28/ - Simon Sarris

这太有创意了。 - manelescuer