IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

Diskusia – 27. diel - 2D kontext plátna 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
Patrik Pastor
Člen
Avatar
Patrik Pastor:30.3.2019 21:21

chtel bych se zeptat, kdyz neudelam tag <img> ale vytvorim ho v javascriptu a potom mu dam src hodnotu, jak to ze to nejde? Cestu mam spravne. Vykresli se pouze cerna barva, bez obrazku jako patternu, nevite v cem to je?

<script>
let platno;
let kontext;
let obrazek;
window.onload = function(){
platno = document.getE­lementById("plat­no");
kontext = platno.getCon­text("2d");

obrazek = new Image();
obrazek.src = "fotky/lamp1.png";

let pattern = kontext.create­Pattern(obrazek, "");

kontext.fillStyle = pattern;
kontext.fillRec­t(50, 50, 100, 100);

kontext.begin­Path();
kontext.arc(100, 225, 50, 0, Math.PI * 2);
kontext.close­Path();
kontext.fill();

}
</script>

 
Odpovedať
30.3.2019 21:21
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:15.3.2020 11:49

Tak tato sekce tutoriálu je pěkně odfláklá.
V podstatě je to úplně stejné, jako kdybyste vypsali možné metody třídy canvas a pod to připsali: použití si vygooglete.
U víc jak půlky příkladů jsem to musel udělat. Je to tu hůř popsané, než kdybych si o tom přečetl rovnou dokumentaci.
Snad poprvé tady na stránkách kritizuji bohužel celou sekci:(

Příklad:

Zvětšení/zmenšení
Kontext můžeme zmenšovat a zvětšovat. Slouží k tomu metoda scale(), která jako parametry přijímá násobky skutečné hodnoty pro souřadnice X a Y. Pro zmenšování se zadávají desetinná čísla menší než 1.

Ale to, že se musí metoda scale volat před vykreslováním obrázku, to jsem si musel vygooglit.

Odpovedať
15.3.2020 11:49
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
Vojtech Palec
Člen
Avatar
Odpovedá na Lubor Pešek
Vojtech Palec:15.3.2020 17:54

To ano, ale to je dál za touhle sekcí. :-)

Editované 15.3.2020 17:57
 
Odpovedať
15.3.2020 17:54
Avatar
Lubor Pešek
Člen
Avatar
Odpovedá na Vojtech Palec
Lubor Pešek:15.3.2020 17:56

A nebo (objektově) můžeš vytvořit instanci čtverce a pak s ní pracuješ, voláš její metody a modifikuješ ji.

Odpovedať
15.3.2020 17:56
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
Marek
Člen
Avatar
Marek:13.9.2020 21:49

Ahoj, nesetkal se někdo během používání metody getImageData() s takovouto chybou ?

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Google zatím nepomohl. Obrázek mám lokálně ve složce..

Díky,
Marek

 
Odpovedať
13.9.2020 21:49
Avatar
Marek
Člen
Avatar
Odpovedá na Marek
Marek:15.9.2020 22:11

Vyřešeno lokálním serverem přes node.js + browsersync. Myslím, že toto během návodu nebylo zmíněno, že je třeba lokální server.

Z nějakého důvodu chrome blokuje při využití některých funkcí canvasu lokální cestu k souboru.

 
Odpovedať
15.9.2020 22:11
Avatar
Yuriy Tretyachenko
Člen
Avatar
Yuriy Tretyachenko:13.3.2021 12:45

V Linearnim prechodu v popisu je preklep - addStopColor() místo addColorStop()

 
Odpovedať
13.3.2021 12:45
Avatar
KaMl
Člen
Avatar
KaMl:10.9.2021 9:15

Nevím, jestli to bylo někde zmíněné (užitečná vychytávka) - aby byl canvas responzivní, stačí přidat do CSS:

canvas{
    width: 100%;
}
 
Odpovedať
10.9.2021 9:15
Avatar
Marcel Sup
Člen
Avatar
Odpovedá na Patrik Pastor
Marcel Sup:12.11.2021 11:18

Také mi to nefungovalo. Musel jsem to zabalit do funkce pro načtení obrázku a pak se to rozběhlo.

let platno;
let kontext;
let obrazek;

window.onload = function () {
    platno = document.getElementById("platno");
    kontext = platno.getContext("2d");
    obrazek = new Image();
    obrazek.src = "obrazky/vzor.png";


   obrazek.onload = function() {
  let pattern = kontext.createPattern(obrazek, 'repeat');
  kontext.fillStyle = pattern;
  kontext.fillRect(0, 0, 100, 100);

  kontext.beginPath();
        kontext.arc(100, 225, 50, 0, Math.PI * 2);
        kontext.closePath();
        kontext.fill();
};
}
 
Odpovedať
12.11.2021 11:18
Avatar
Jakub Tioka
Člen
Avatar
Jakub Tioka:7.3.2022 17:52

Ahoj,
není náhodou chybička v textu? Viz obrázek přehozený slovosled metody?

nechci být hrubý, ale dle mého je to docela nešťastně napsané celé tahle lekce. Doposud tu bylo vše krásně zpracované a nebylo třeba toliko googlení okolo. Tady tyhle dvě lekce o <canvas> mě docela zasekaly.

 
Odpovedať
7.3.2022 17:52
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.

Zatiaľ nikto nevložil komentár - buď prvý!