Cómo dibujar una línea irregular/dibujada a mano usando svg/canvas?

Question

Quiero dibujar una línea vertical que se puede cambiar de tamaño (según el contenido de la página), pero que parece estar dibujada a mano, en lugar de recta.

Actualmente estoy pensando en usar SVG o Canvas para lograr esto. La línea se ejecutará al costado de mi página web, por lo tanto, debe ser escalable entre la parte superior e inferior del contenedor. ¿Cómo puedo conseguir esto?

Answer 1

¿Deseas trazar una línea con jitter?

Intente dibujar un montón de curvas Bezier sucesivas, con todas las partes puntuales del eje Y espaciadas equitativamente, y aleatorice los valores x en cierta cantidad.

He aquí un ejemplo para empezar:

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/