Изображение холста не отображается при открытии веб-страницы. - javascript, html5-canvas, background-image

Lalit Kumar спросил: 28 марта 2018 в 03:32 в: javascript

Я создаю холст, чтобы отображать в нем капчу, используя 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>

Я хочу, чтобы код отображал фон canvas при загрузке страницы, когда я не нажал кнопку обновления

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

Luca ответил: 28 марта 2018 в 03:33

Где этот скрипт загружен? И почему вы устанавливаете и window.onload, и body.onload в canvas ()?

1 ответ

Есть решение

ElvenStar ответил: 28 марта 2018 в 05:52

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

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

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

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

Lalit Kumar ответил: 28 марта 2018 в 06:36

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

ElvenStar ответил: 29 марта 2018 в 09:55

Рад, что помог :)