Эскизный эффект с помощью HTML5 canvas - PullRequest
Новая
       34

Эскизный эффект с помощью HTML5 canvas

4 голосов
/ 02 августа 2011

У меня есть изображение JPEG, состоящее из нарисованных от руки контуров города. Я хочу добиться эффекта медленно зарисовки, рисуя эти контуры на пустой области слева направо. Как я могу сделать это на основе элемента холста HTML5? Что-то вроде импорта этого JPEG на холст, наложения на него анимированной маски или, альтернативно, повторного разложения JPEG на набор кривых (если это возможно, я хотел бы получить список соответствующих инструментов) и рисование этих линий с помощью simple-stupid ctx.lineTo (...) и другие кривые функции.

Заранее спасибо.

1 Ответ

2 голосов
/ 04 августа 2011

Некоторое время назад я показывал кому-то, как создать эффект анимированной рисованной линии на холсте. Техника рисования рисовала чуть больше изображения в каждом кадре, что, кажется, делает в значительной степени то, что вы хотели бы. Другими словами: 

var amount = 1;
function drawMore() {
    ctx.clearRect(0,0,can.width, can.height);
    ctx.drawImage(can2, 0, 0, can.width, amount, 0, 0, can.width, amount);
    amount++;
}
setInterval(drawMore, 90);

Не нарисует ни одного изображения, затем нарисует верхний ряд пикселей, затем нарисует два верхних ряда пикселей и т. Д. Посмотрите:

http://jsfiddle.net/GfGVE/28/

...