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

Question

我想画一条可调整大小的垂直线(基于页面内容)，但这似乎是手绘的，而不是直线。

我目前正在考虑使用SVG或Canvas来实现这一点。这条线将运行在我的网页的一侧，因此需要在容器的顶部和底部之间可伸缩。我如何才能做到这一点？

Answer 1

所以你想和抖动划清界限？

尝试绘制一组连续的Bezier曲线，其中所有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/