Staň se programátorem díky kurzům PRO s podporou uplatnění a vlastním full-stack projektem. Více informací:
POSLEDNÍ ŠANCE do 29. 8. 2025: Pracuj až o 60 % rychleji díky akreditovanému kurzu Specialista na AI. Nyní již od 0 Kč. Zjisti více:

Diskuze – Lekce 28 - Transformace kontextu plátna 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
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>

 
Odpovědět
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.

Odpovědět
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
Odpovídá na Lubor Pešek
Vojtech Palec:15.3.2020 17:54

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

Editováno 15.3.2020 17:57
 
Odpovědět
15.3.2020 17:54
Avatar
Lubor Pešek
Člen
Avatar
Odpovídá 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.

Odpovědět
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

 
Odpovědět
13.9.2020 21:49
Avatar
Marek
Člen
Avatar
Odpovídá 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.

 
Odpovědět
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()

 
Odpovědět
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%;
}
 
Odpovědět
10.9.2021 9:15
Avatar
Marcel Sup
Člen
Avatar
Odpovídá 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();
};
}
 
Odpovědět
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.

 
Odpovědět
7.3.2022 17:52
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 48.