Как нарисовать неправильную / нарисованную от руки линию, используя svg / canvas? - PullRequest
Новая
       26

Как нарисовать неправильную / нарисованную от руки линию, используя svg / canvas?

7 голосов
/ 16 июня 2011

Я хочу нарисовать вертикальную линию с изменяемым размером (в зависимости от содержимого страницы), но, скорее, нарисованную от руки, чем прямую.

В настоящее время я думаю об использовании SVG или Canvas для достижения этой цели.Линия будет проходить по стороне моей веб-страницы, поэтому должна быть масштабируемой между верхней и нижней частью контейнера.Как мне этого добиться?

1 Ответ

10 голосов
/ 16 июня 2011

То есть вы хотите нарисовать линию с джиттером?

Попробуйте нарисовать несколько последовательных кривых Безье, с равными интервалами между всеми точечными частями оси 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/

...