[JS 2] Как може да се рисува с canvas, но пиксел по пиксел или със забавяне?


0

Здравейте колеги,

Някой знае ли как може да се рисува с canvas, но на екрана да се изобразява нарисуваното с някакво забавяне, т.е. пиксел по пиксел? Един вид да се създаде впечатлението, че човек го рисува на ръка.

Например, как би могло тази линия да се изчертае със забявяне: http://jsbin.com/oqatew/1/edit

Търся някакъв вариант с чист JavaScript или jQuery.

Благодаря предварително!




Отговори



2

 

Здравей!
За да направиш това което искаш ти трябва Canvas анимация.
Можеш да си направиш нещо като Game Engine  с 'window.requestAnimationFrame'.
 
За работа с пиксели в Canvas ти трябват getImagedata() и putImageData().
 
Ето тук има добър туториал за Canvas. Има и за анимация:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
 
Успех.

от ipankov (425 точки)


0
Много благодаря, колега, ще ги прегледам нещата!

от georgi.s.yankov (6219 точки)


3
Ето ти линията -> http://jsbin.com/agilif/15/edit
Ако искаш по-насочено движение, можеш да си направиш туулче, което взима кординатите на мишката спрямо канвас със същите размери и ги записва в json, после ги обхождаш тях вместо да задаваш в кода си къде да ходи чертата.



0
Големи благодарности, колега!

от georgi.s.yankov (6219 точки)