Diskuze: canvas, změna obrázku.

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

pokusnicek

Člen

pokusnicek:13.4.2017 10:18

Zdravím Vás,

mám prosbu, chci se zeptat jak změnit na závislosti na stisknutí barvy(odkazu) v canvasu obrázek. Pro lepší pochopení přidávám obrázek a kod.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>Pokus</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
        <script type="text/javascript">
          var obrazek = new Image();
          obrazek.src = "orange.png";



           function draw(){
                var ctx = document.getElementById('platno').getContext('2d');
                ctx.drawImage(obrazek,40,35);
          }
         window.onload = draw;

        </script>
</head>
<body>
      <header>

      </header>
    <section class="wrapper">

            <section>
                   <canvas height="450px" width="450px" id="platno">

                 <canvas>
            </section>
       <!-- VÝBĚR BAREV -->
      <ul class="barvy">
        <li><a href="#" title="Červená barva" class="red"></a></li>
        <li><a href="#" title="Oranžová barva" class="orange" onload="zmenobrazek()"></a></li>
        <li><a href="#" title="Žlutá barva" class="yellow"></a></li>
        <li><a href="#" title="Modrá barva" class="blue"></a></li>
        <li><a href="#" title="Fialová barva" class="purple"></a></li>
        <li><a href="#" title="Zelená barva" class="green"></a></li>
        <li><a href="#" title="Černá barva" class="black"></a></li>
        <li><a href="#" title="Bíla barva" class="white"></a></li>
      </ul>

      <!-- VÝBĚR MOTIVU -->
      <section class="motiv">
      <input type="file">
      </section>


    </section>
</body>
</html>

Odpovědět

13.4.2017 10:18

Petr Šťastný

Tvůrce

Petr Šťastný:13.4.2017 11:14

Já to dělám tak, že mám více obrázků

<img src='img1.png' id='obr1'>
<img src='img2.png' id='obr2'>
<img src='img3.png' id='obr3'>

Do onclick odkazu hodíš vymazání canvasu a vykreslení správného obrázku

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(document.getElementById('obr3'), 40, 35);

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

13.4.2017 11:14

pokusnicek

Člen

pokusnicek:13.4.2017 11:24

Takže do canvasu vložím na pevno všechny obrázky co chci. Potom do každého odkazu vložím funkce, kde se budou jak si podotkl měnit obrázky?

Nahoru Odpovědět

13.4.2017 11:24

Petr Šťastný

Tvůrce

Petr Šťastný:13.4.2017 11:34

Asi ano... Taky mě napadá, že bys nastavil část canvasu na danou barvu a bíle bys udělal tu část, kde to tričko není, zbytek by byl průhledný, takhle bys pořeboval jenom 1 obrázek. Ale možná bude jednoduší to udělat přes několik obrázků. Navíc by to nevypadalo hezky.

Editováno 13.4.2017 11:34

Nahoru Odpovědět

13.4.2017 11:34

pokusnicek

Člen

pokusnicek:13.4.2017 11:39

A nebo jestli to správně chápu, tak vytvořit tolik funkci kolik tam mám barev. A vždy aplikovat vyčištění canvasu a nasledné nahrání obrázku jak si ukazal ten kod?

Nahoru Odpovědět

13.4.2017 11:39

Petr Šťastný

Tvůrce

Petr Šťastný:13.4.2017 11:44

Ano, správně

Nahoru Odpovědět

13.4.2017 11:44

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 6 zpráv z 6.

Nejčastěji vyhledáváné

Diskuze: canvas, změna obrázku.