Comment dessiner une ligne irrégulière/dessinée à la main en utilisant svg/canvas?

Question

Je souhaite tracer une ligne verticale redimensionnable (en fonction du contenu de la page), mais qui semble être dessinée à la main plutôt que droite. Je pense actuellement à utiliser SVG ou Canvas pour y arriver. La ligne descendra le long de ma page Web, donc doit être évolutive entre le haut et le bas du conteneur. Comment puis-je atteindre cet objectif?

Answer 1

Donc, vous voulez tracer une ligne avec la gigue? Essayez de tracer un ensemble de courbes de Bézier successives, avec toutes les parties du point de l'axe Y équidistantes, et randomisez les valeurs x d'une certaine manière.

Voici un exemple pour vous aider à démarrer:

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/