Блог

Главная - Вопросы по программированию - настраиваемый создатель аватара лошади с помощью javascript и холста

настраиваемый создатель аватара лошади с помощью javascript и холста

#javascript

Вопрос:

Я пытаюсь создать настраиваемый создатель аватара лошади с помощью javascript, различные части лошади — «базовая лошадь(базовый цвет),глаз,Грива,Маркировка,Недоуздок», мне удалось создать генератор, который случайным образом генерирует эти части и рисует их на холсте, код выглядит следующим образом :

 <html>

<head>

    <script>

     
window.onload = function()
  {

    // Base color of the horse
      var basehorse = new Image();
      var basehorsenum = Math.floor(Math.random()*3) 1;
      var basehorsename= "basehorse"   basehorsenum   ".png";
      function hb1(){
        basehorsename = "basehorse1.png";
      }
      basehorse.src = basehorsename ; 

    // Eyes of the horse
      var eye = new Image();
      var eyenum = Math.floor(Math.random()*3) 1;
      var eyename= "eye"   eyenum   ".png";
      eye.src = eyename ; 

      // Mane of the horse
      var mane = new Image();
      var manenum = Math.floor(Math.random()*3) 1;
      var manename= "mane"   manenum   ".png";
      mane.src = manename ; 

      // Markings of the horse
      var marking = new Image();
      var markingnum = Math.floor(Math.random()*3) 1;
      var markingname= "marking"   markingnum   ".png";
      marking.src = markingname ; 

      // Halter of the horse
      var halter = new Image();
      var halternum = Math.floor(Math.random()*3) 1;
      var haltername= "halter"   halternum   ".png";
      halter.src = haltername ; 

      // Base color loaded
     
      basehorse.onload= function()
      {

          buildhorse();
      
      }

    // Eyes loaded
     eye.onload= function()
      {
          buildhorse();
      }

    // Eyes loaded
     mane.onload= function()
      {
          buildhorse();
      }

    // Marking loaded
    marking.onload= function()
      {
          buildhorse();
      }

    // Halter loaded
    halter.onload= function()
      {
          buildhorse();
      }


      function buildhorse()
      {
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          canvas.width = 400;
          canvas.height = 400;
          
          //Draw horse base
          ctx.drawImage(basehorse,((400-basehorse.width)/2),10);
          //Draw eye
          ctx.drawImage(eye,106,135);
          //Draw marking
          ctx.drawImage(marking,0,75);
          //Draw mane
          ctx.drawImage(mane,81,37);
          //Draw mane
          ctx.drawImage(halter,38,48);   

      }


     
  }
       


    </script>

</head>

<body>
    <div align="center">
        <header>
         <div >
             <button >Undo</button> 
             <button >Redo</button> 
        </div>
        </header>

        <article>
        <canvas id="canvas" style= "border:3px solid #000000"></canvas>
        <br><br>
        <button onClick="window.location.reload();">Random</button>
        
        <button onClick="hb1();">hb1</button>
        
        </article>

        <footer>

        </footer>
        
        
    


    </div>

</body>

это генерирует части лошади случайным образом и рисует их на холсте, теперь я хочу сделать кнопки для каждой части лошади по отдельности , например, сделать кнопку для базового черного цвета, при нажатии на которую лошадь с базовым черным цветом будет нарисована на холсте.

Спасибо

Комментарии:

1. Добро пожаловать в Stack Overflow. Прежде чем задать вопрос, вы должны попытаться решить проблему самостоятельно и показать нам свою неудачную попытку, чтобы мы знали, как вам помочь.

Метки: