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