NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 26 - Obrázky a kreslení na canvas v JavaScriptu

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Tomáš Pařízek
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
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.

 
Odpovědět
8.2.2018 15:48
Avatar
Jaroslav Nahodil
Člen
Avatar
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.getE­lementById("plat­no"));</code>

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

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

Editováno 19.3.2019 9:43
 
Odpovědět
19.3.2019 9:41
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Jaroslav Nahodil
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í.

 
Odpovědět
19.3.2019 15:15
Avatar
Jaroslav Drobek
Člen
Avatar
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..
 
Odpovědět
4.5.2022 13:42
Avatar
Dominik Bican
Člen
Avatar
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?

 
Odpovědět
22.5.2022 22:29
Avatar
Dominik Bican
Člen
Avatar
Odpovídá na Dominik Bican
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);
}
 
Odpovědět
22.5.2022 23:04
Avatar
Lubor Pešek
Člen
Avatar
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í.

Odpovědět
18.6.2022 20:20
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.
Avatar
Jarda Antoš
Člen
Avatar
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.

 
Odpovědět
10.9.2022 20:54
Avatar
Kamil Pajta
Člen
Avatar
Kamil Pajta:27.9.2022 19:32

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

 
Odpovědět
27.9.2022 19:32
Avatar
Markéta Vokáčová
Člen
Avatar
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á.

 
Odpovědět
6.10.2022 12:21
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 55.