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

Question

我想绘制一条可调整大小的垂直线(基于页面内容)，但它看起来像是手绘的，而不是直线。

我目前正在考虑使用 SVG 或 Canvas 来实现这一点。该行将沿着我的网页的一侧向下延伸，因此需要在容器的顶部和底部之间进行扩展。我怎样才能做到这一点？

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/