Autor | Zpráva | ||
---|---|---|---|
MyScript Profil * |
#1 · Zasláno: 23. 7. 2013, 13:22:20
Dobrý den,
Učím se s canvasem a chtěl bych udělat pohybující se kruh. Udělal jsem tento zdroják: <canvas width="800" height="800"></canvas> <script type="text/javascript"> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); var x = 100, y = 100, var vx = 1; var vy = 3; function draw() { var radius = 15; context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2); x += vx; y += vy; ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); } setInterval(draw, 1000/60); </script> Bohužel, V některých prohlížečích ( chrome ) to nevykreslí nic, protože se kód za řádkou která má mazat nevykoná. v některých ( firefox ) se kód vykonává dál, ale kruh se nemaže, takže z toho vznikne čára. Prosím poraďte, kde dělám chybu. Byl bych vám za to velmi vděčný... |
||
1Pupik1989 Profil |
#2 · Zasláno: 25. 7. 2013, 21:51:38
čekal jsem jestli někdo odepíše, ale tady moc canvas neřeší.
queryselector nemá zrovna podporu. canvas také podporu moc nemá. a mažte celé plátno, na rychlosti to moc neubere. |
||
Chamurappi Profil |
#3 · Zasláno: 26. 7. 2013, 00:42:04
Reaguji na 1Pupika1989:
„mažte celé plátno, na rychlosti to moc neubere“ Mám jinou zkušenost. I když teda v tomto se prohlížeče dost mění verzi od verze, takže možná je to v dnešních verzích už opravdu jedno. „ale tady moc canvas neřeší“ Kdyby dal živou ukázku, nebo aspoň funkční kód, tak by se na to určitě někdo podíval. Reaguji na MyScripta: „ale kruh se nemaže, takže z toho vznikne čára“ Chyba spočívá v tom, že arc doplňuje výseč do cesty a fill vybarvuje celou cestu. Tu cestu ale nikde neukončuješ, ani nezačínáš novou, takže tvoříš jednu dlouhou cestu složenou z výsečí a ta se každým fill em vždy vybarví celá. Proto také ta vzniklá tlustá čára má ostré hrany (bez antialiasingu), každá výseč je vykreslena mnohokrát přes sebe…
|
||
1Pupik1989 Profil |
Na rychlosti se to nelišilo v žádném prohlížeči. Při plátně 1280x1024 je to setina milisekundy, ale záleží i na pc a to dost. Přeci jen je to sw záležitost.
Nebo to vysvětlím jinak. U jedné elipsy (v tomto případě kruhu) je to asi znatelné. Pokud jsou ale kruhy tři, tak hledání minimálního x,y a maximálního x,y je náročnější, než smazat celé plátno, to už mám odzkoušené. Snažil jsem se vytvořit něco na styl frame buffer s Z-depth testem a i bez Z-depth testu je to náročné až až. A to bylo prakticky jen vykreslení scény do jednoho canvasu a následné vykreslení do druhého. Samotné mazání je opravdu minimum v rámci setin milisekundy. Zase se to ale odvíjí od prohlížeče, nejhůř je na tom Opera. To prostě vždy byla brzda co se týče SW renderingu. |
||
Časová prodleva: 3 dny
|
|||
peta Profil |
Js kod v #1 nelze spustit ani ve FF.
Na radku 10 mi to hlasi chybu, protoze par radku nad tim mas carku. Na radku 15 to hlasi chybu, protoze sis context o par radku vys pojmenoval jako ctx a ne context. http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/ Z tutorialu jsem vytahl z prikladu chybejici prikazy a po opravach predchozich chyb mi to udelalo padajici kulicku. Asi minuta googlovani. Jak dlouho ti trvalo napsat prispevek? ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fillStyle = 'red'; ctx.fill(); |
||
Časová prodleva: 11 let
|
0