Autor Zpráva
MyScript
Profil *
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
č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
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.
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();
Mno, a kdybych to chtel zrychlit, tak omezim matematicke ukony. Treba pri tom prekreslovani neustale pocitat radius-1 nebo 2*radius...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: