| 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 fillem 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: 13 let
|
|||
0