如何使用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/