Mikuláš je tu! Získaj 90 % extra kreditov ZADARMO s promo kódom CERTIK90 pri nákupe od 1 199 kreditov. Len do nedele 7. 12. 2025! Zisti viac:
NOVINKA: Najžiadanejšie rekvalifikačné kurzy teraz s 50% zľavou + kurz AI ZADARMO. Nečakaj, táto ponuka dlho nevydrží! Zisti viac:

Diskusia – 28. 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
Posledné komentáre sú na spodnej časti poslednej stránky.
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>

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

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.

Avatar
Yuriy Tretyachenko
Člen
Avatar
Yuriy Tretyachenko:13.3.2021 12:45

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

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%;
}
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();
};
}
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.

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 48.