Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

Diskusia – 25. 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
Avatar
Tomáš Pařízek
Člen
Avatar
Odpovedá 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.

 
Odpovedať
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

Editované 19.3.2019 9:43
 
Odpovedať
19.3.2019 9:41
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovedá 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í.

 
Odpovedať
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..
 
Odpovedať
+1
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?

 
Odpovedať
22.5.2022 22:29
Avatar
Dominik Bican
Člen
Avatar
Odpovedá 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);
}
 
Odpovedať
+16
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í.

Odpovedať
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.

 
Odpovedať
+7
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......­.............­........

 
Odpovedať
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á.

 
Odpovedať
+30
6.10.2022 12:21
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.