svg/canvas kullanarak düzensiz/elle çizilmiş çizgi nasıl çizilir?

Question

Yeniden boyutlandırılabilir (sayfa içeriğine göre), ancak düz yerine elle çizilmiş gibi görünen dikey bir çizgi çizmek istiyorum.

Bunu başarmak için SVG veya Canvas kullanmayı düşünüyorum. Hat, web sayfamın yanından aşağıya doğru ilerleyecek, dolayısıyla kabın üst ve alt kısmı arasında ölçeklenebilmesi gerekiyor. Bunu nasıl başarabilirim?

Answer 1

Yani jitter ile bir çizgi çizmek ister misiniz?

Y ekseni noktası parçalarının tümü eşit aralıklarla bir dizi ardışık Bezier eğrisi çizmeyi deneyin ve x değerlerini bir miktarına rasgele hale getirin.

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/