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