javascript - 可定制的马头像制作器，带有 javascript 和画布

问题描述

我正在尝试使用javascript创建一个可定制的马头像制作器，马的不同部分是“basehorse（base color），Eye，Mane，Marking，Halter”，我设法制作了一个随机生成这些部分并绘制它们的生成器在画布中，代码如下：

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

这会随机生成马的部分并将它们绘制到画布中，现在我想为马的每个部分分别制作按钮，例如为基色黑色制作一个按钮，当单击基色黑色的马时，会在画布中绘制.

谢谢

标签： javascript

javascript - 可定制的马头像制作器，带有 javascript 和画布

问题描述

解决方案

推荐阅读