Question

我正在创建一个使用javascript在其中显示验证码的画布。问题是我想为它添加背景但在打开页面时不加载背景。但是，当我点击刷新按钮时它工作正常。这是代码：

<script>
    var code = {};
    function canvas(){

         var canvas = document.getElementById('canvas');
           var ctx = canvas.getContext('2d');
           ctx.clearRect(0, 0, canvas.width, canvas.height);
            var background = new Image();
            background.src = "http://gazell.io/wp-content/uploads/2016/10/image011.png";
            ctx.drawImage(background, 0 ,0);
        var list = new Array('@','%','#','$','*','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9');                   
        var i;
        for (i=0;i<6;i++){
          var a = list[Math.floor(Math.random() * list.length)];
          var b = list[Math.floor(Math.random() * list.length)];
          var c = list[Math.floor(Math.random() * list.length)];
          var d = list[Math.floor(Math.random() * list.length)];
          var e = list[Math.floor(Math.random() * list.length)];
          var f = list[Math.floor(Math.random() * list.length)];
          var g = list[Math.floor(Math.random() * list.length)];
         }
       code.value = a  + b + c +  d + e + f + g;

       ctx.font = "italic 42px verdana";
       ctx.fillStyle="#FF9912";
       ctx.textAlign = "center";
       ctx.fillText(code.value, canvas.width/2,canvas.height/2);
    }

    window.onload = canvas();

    function ValidCaptcha(){
       //var string1 = document.getElementById('canvas').value;
       var string1 = document.getElementById('text').value;
       var string2 = code.value;
       if(string1 != null){
           if(string1 == string2){
           alert("true");
       }else{
           alert("false");
        }
       }  
    }     

</script>

我希望代码在加载页面时显示画布背景，而不是在我点击刷新按钮时显示

<body onload="canvas();">
  <div class="box">
    <h1>Testing Captcha</h1>
    <canvas id="canvas" height="80" width="260"></canvas>
    <input id="text" type="text"></input>
    <button id="btn" onclick="canvas();">Refresh</button>
    <button type="button" value="Check" onclick="ValidCaptcha();">Submit</button>
  </div>
</body>

Answer 1

我认为您的问题在于您尝试在加载图片或检索其内容之前设置画布的背景图像。

要解决此问题，您需要先创建图像元素，然后在onload事件中绘制画布。

我已附上您工作的工作版本，同时确保脚本是HTML正文中的最后一个元素

＆＃13;

<body onload="canvas();">
  <div class="box">
    <h1>Testing Captcha</h1>
    <canvas id="canvas" height="80" width="260"></canvas>
    <input id="text" type="text"></input>
    <button id="btn" onclick="canvas();">Refresh</button>
    <button type="button" value="Check" onclick="ValidCaptcha();">Submit</button>
  </div>

</body>
<script>
    var code = {};
    function canvas(){
            
     var createdImage = drawImage();
      //wait till image is loaded then draw canvas
      createdImage.onload = function(){
          var canvas = document.getElementById('canvas');
           var ctx = canvas.getContext('2d');
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           
            ctx.drawImage(createdImage, 0 ,0);
        var list = new Array('@','%','#','$','*','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9');                   
        var i;
        for (i=0;i<6;i++){
          var a = list[Math.floor(Math.random() * list.length)];
          var b = list[Math.floor(Math.random() * list.length)];
          var c = list[Math.floor(Math.random() * list.length)];
          var d = list[Math.floor(Math.random() * list.length)];
          var e = list[Math.floor(Math.random() * list.length)];
          var f = list[Math.floor(Math.random() * list.length)];
          var g = list[Math.floor(Math.random() * list.length)];
         }
       code.value = a  + b + c +  d + e + f + g;

       ctx.font = "italic 42px verdana";
       ctx.fillStyle="#FF9912";
       ctx.textAlign = "center";
       ctx.fillText(code.value, canvas.width/2,canvas.height/2);
      }
       
    }

  var hiddenImg = document.getElementById('loadedImg');
  window.onLoad = canvas();
  
   

    function ValidCaptcha(){
       //var string1 = document.getElementById('canvas').value;
       var string1 = document.getElementById('text').value;
       var string2 = code.value;
       if(string1 != null){
           if(string1 == string2){
           alert("true");
       }else{
           alert("false");
        }
       }  
    } 
  //Draw image in seprate method
  function drawImage(){
     var background = new Image();
     background.src = "https://rrraul.co/wp-content/uploads/2017/06/projpanel_illust_random-1.jpg";
    
    return background;
  }

</script>

＆＃13;

画布背景图像没有显示在开放的网页上

1 个答案: