Diskusia – 26. diel - Obrázky a kreslenie na canvas v JavaScripte

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Tomáš Pařízek

Člen

Tomáš Pařízek:8.2.2018 15:48

Děkuji, dělám si z toho takovou knihovničku která by mně pomáhala, abych nemusel psát tolik kódu. Teď už budu vědět jak na to.

Odpovedať

Jaroslav Nahodil

Člen

Jaroslav Nahodil:19.3.2019 9:41

Jenom bych doplnil, když dostáváme plátno metodou getElementById(), IDE/editor nám nezobrazuje návrhy metod a vlastností pro Canvas. Metodou getElementById() můžeme dostat libovolný typ HTML elementu, a tak IDE navrhuje obecné metody a vlastnosti.

Napravíme to tímto zápisem (typ získaného HTML elementu nastavíme na HTMLCanvasElement):
<code>let platno = /** @type {HTMLCanvasElement} */ (document.getElementById("platno"));</code>

Nutné dát document.getElementById() do závorek () !
Funguje ve Visual Studio Code, v Netbeans vypadá, že stále chybí podpora pro Canvas.

viz. https://github.com/…issues/35727

Editované

Odpovedať

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:19.3.2019 15:15

to že to nefunguje bez komentáře je logické, protože JS je dynamicky typovaný jazyk a IDE nemůže mít tušení jaký objekt jakého datového typu to za běhu vrátí.

Odpovedať

Jaroslav Drobek

Člen

Jaroslav Drobek:4.5.2022 13:42

Hodnocení:

Asi je dobře, že se autor nepokoušel vysvětlit, co jsou parametry x a y u obdélníků nebo, později, absolutní pozice.
Vykreslit v příkladu výseč místo kruhu by asi bylo více poučné, když už se vynechávají informace o tom, odkud se uvedené úhly nanášejí, tj. přesněji, jaké je jejich společné a pevné rameno.
Externí obrázky: někam se ztratil kód.
Označení context.font pro vlastnost? Jen font by vypadalo logičtěji..

Odpovedať

Dominik Bican

Člen

Dominik Bican:22.5.2022 22:29

Zdravím, mám problém s canvas elementem. Hned jeho první použití, vykreslení těch obdélníků, se mi prostě nedaří.
Používám Google Chrome a VS Code. Když prozkoumávám kód v rámci Chromu, podtrhává mi to ten řádek s metodou getContext.

let kontext = platno.getContext("2d");

Jako by to tu metodu prostě neznalo, ani když napíšu platno. ve VS Code, tak mi to danou metodu nenapovídá, což je divné. Snažil jsem se googlit a žádné z nalezených řešení nepomohlo.
Měl někdo podobný problém?

Odpovedať

Dominik Bican

Člen

Dominik Bican:22.5.2022 23:04

Tak jsem nakonec našel odpověď a bylo by asi vhodné to i zde v lekci doplnit, aby to bylo vždy jasné. Je nutné skript spustit až po načtení stránky, jinak se nedaří daný element načíst, takže JS část zde:

window.onload = function () {
    let platno = document.getElementById("platno");
    let kontext = platno.getContext("2d");
    kontext.fillRect(50, 50, 100, 100);
    kontext.strokeRect(200, 50, 100, 100);
}

Odpovedať

Lubor Pešek

Člen

Lubor Pešek:18.6.2022 20:20

Chybí mi tu kupříkladu ukázka tloušťky okraje (context.lineWidth = ##).
Jinak mi toto vykreslování připomíná dnes již zastaralé metody javax.swing v javě. Možná mě ale další seriály překvapí.

Odpovedať

Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.

Jarda Antoš

Člen

Jarda Antoš:10.9.2022 20:54

Zdravim, prekvapuje me, ze ani po 6 letech tu neni kod pro ty externi obrazky.
Zkousel jsem toto, ale nefunguje to, delam neco spatne?

let platno = document.getElementById("platno");
let kontext = platno.getContext("2d");
let obrazek = document.createElement("img");
obrazek.setAttribute("src", "img/image1.png");
kontext.drawImage();

Pak jsem koukal do kodu, ktery se da stahnout, ale tam je jen zpusob, ze mate ten obrazek v html kodu a odtamtud si ho nacitate, pak ho ze stranek smazete a pak ho znovu zobrazite nekde na canvasu. To mi prijde takove pres ruku, nejde to udelat i jinak?
Diky.

Odpovedať

Kamil Pajta

Člen

Kamil Pajta:27.9.2022 19:32

o obrázku nie je uvedený príklad...........................

Odpovedať

Markéta Vokáčová

Člen

Markéta Vokáčová:6.10.2022 12:21

Toto zase bylo peklo, celý kurz je dost slabý a kdybych ho nepotřebovala k rekvalifikačnímu kurzu, dávno ho vzdávám Obsah tohoto kurzu beru jen jako zadání toho, co se mám naučit jinde. Četl to autor lekce po sobě a četl to někdo po autorovi? Vysvětlit u metody dva parametry a v praktické ukázce do ní bez jakéhokoliv upřesnění uvést 4, u jiné metody smotané do sebe vysvětlení různých parametrů.. to jsou u autora běžná pochybení. Samotná logika jednotlivých částí kurzu je strašně chaotická.

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 54.

Najčastejšie vyhľadávané

Diskusia – 26. diel - Obrázky a kreslenie na canvas v JavaScripte