<bdo id='yG29J'></bdo><ul id='yG29J'></ul>
    1. <i id='yG29J'><tr id='yG29J'><dt id='yG29J'><q id='yG29J'><span id='yG29J'><b id='yG29J'><form id='yG29J'><ins id='yG29J'></ins><ul id='yG29J'></ul><sub id='yG29J'></sub></form><legend id='yG29J'></legend><bdo id='yG29J'><pre id='yG29J'><center id='yG29J'></center></pre></bdo></b><th id='yG29J'></th></span></q></dt></tr></i><div id='yG29J'><tfoot id='yG29J'></tfoot><dl id='yG29J'><fieldset id='yG29J'></fieldset></dl></div>

      <small id='yG29J'></small><noframes id='yG29J'>

        <legend id='yG29J'><style id='yG29J'><dir id='yG29J'><q id='yG29J'></q></dir></style></legend>
        <tfoot id='yG29J'></tfoot>

      1. HTML5 画布 - drawImage 并不总是绘制图像

        时间:2023-06-21
      2. <tfoot id='btCDW'></tfoot>

        <i id='btCDW'><tr id='btCDW'><dt id='btCDW'><q id='btCDW'><span id='btCDW'><b id='btCDW'><form id='btCDW'><ins id='btCDW'></ins><ul id='btCDW'></ul><sub id='btCDW'></sub></form><legend id='btCDW'></legend><bdo id='btCDW'><pre id='btCDW'><center id='btCDW'></center></pre></bdo></b><th id='btCDW'></th></span></q></dt></tr></i><div id='btCDW'><tfoot id='btCDW'></tfoot><dl id='btCDW'><fieldset id='btCDW'></fieldset></dl></div>

          1. <small id='btCDW'></small><noframes id='btCDW'>

            • <bdo id='btCDW'></bdo><ul id='btCDW'></ul>
              <legend id='btCDW'><style id='btCDW'><dir id='btCDW'><q id='btCDW'></q></dir></style></legend>
                  <tbody id='btCDW'></tbody>

                  本文介绍了HTML5 画布 - drawImage 并不总是绘制图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  每次用户按下按钮时,我都会在画布上绘图,但有时图像不会在画布上绘制.我认为这可能是在 context.drawimage 函数运行之前没有及时加载图像,因为有时会绘制一些较小的文件.我已经使用了控制台并检查了资源,所以这是我能想到的唯一问题.

                  I am drawing on the canvas each time a user presses a button, however sometimes the image is not getting drawn on the canvas. I think this could be that the image isn't loaded in time before the context.drawimage function runs, as some of the smaller files sometimes get drawn. I've used the console and checked resources and so this is the only problem I can think of.

                  如何避免这个问题?

                  这是我的 Javascript 代码.

                  This is my Javascript code.

                  var canvas = document.getElementById("myCanvas");
                  var context = canvas.getContext("2d");
                  
                  var questionbg = new Image();
                  var answerbg = new Image();
                  
                  //this code is inside a function that is called each time a user presses a button
                  if(questiontype == "text"){
                      questionbg.src = "./resources/textquestionbg.png";
                      context.drawImage(questionbg, 0, 0);
                      }
                  //if image question
                  else if(questiontype == "image"){
                  questionbg.src = "./resources/imageaudiovideoquestionbg.png";
                  context.drawImage(questionbg, 0, 0);
                  }
                  //if audio question
                  else if(questiontype == "audio"){
                  questionbg.src = "./resources/imageaudiovideoquestionbg.png";
                  context.drawImage(questionbg, 0, 0);
                  }
                  //else it is a video question
                  else{
                  questionbg.src = "./resources/imageaudiovideoquestionbg.png";
                  context.drawImage(questionbg, 0, 0);
                  }
                  

                  推荐答案

                  你应该检查图像是否加载.如果没有,则监听 load 事件.

                  You should check if the image is loaded. If not then listen to the load event.

                  questionbg.src = "./resources/imageaudiovideoquestionbg.png";
                  if (questionbg.complete) {
                      context.drawImage(questionbg, 0, 0);
                  } else {
                      questionbg.onload = function () {
                          context.drawImage(questionbg, 0, 0);    
                      };
                  }
                  


                  MDN(Mozilla Doc,顺便说一句很好的来源)建议:


                  MDN (Mozilla Doc, great source btw) suggests:

                  function draw() {
                    var ctx = document.getElementById('canvas').getContext('2d');
                    var img = new Image();
                    img.onload = function(){
                      ctx.drawImage(img,0,0);
                      ctx.beginPath();
                      ctx.moveTo(30,96);
                      ctx.lineTo(70,66);
                      ctx.lineTo(103,76);
                      ctx.lineTo(170,15);
                      ctx.stroke();
                    };
                    img.src = '/files/4531/backdrop.png';
                  }
                  

                  显然,您不想应用描边或填充.但是,想法是一样的.

                  Obviously, you are not wanting to apply the stroke or fill. However, the idea is the same.

                  这篇关于HTML5 画布 - drawImage 并不总是绘制图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:如何在 HTML Canvas 中获取旧生成元素的引用? 下一篇:Canvas drawImage - firefox/opera/ie(不是chrome)中瓷砖的可见边缘

                  相关文章

                • <tfoot id='ckBwJ'></tfoot>

                      <bdo id='ckBwJ'></bdo><ul id='ckBwJ'></ul>

                    <small id='ckBwJ'></small><noframes id='ckBwJ'>

                      <legend id='ckBwJ'><style id='ckBwJ'><dir id='ckBwJ'><q id='ckBwJ'></q></dir></style></legend>

                      <i id='ckBwJ'><tr id='ckBwJ'><dt id='ckBwJ'><q id='ckBwJ'><span id='ckBwJ'><b id='ckBwJ'><form id='ckBwJ'><ins id='ckBwJ'></ins><ul id='ckBwJ'></ul><sub id='ckBwJ'></sub></form><legend id='ckBwJ'></legend><bdo id='ckBwJ'><pre id='ckBwJ'><center id='ckBwJ'></center></pre></bdo></b><th id='ckBwJ'></th></span></q></dt></tr></i><div id='ckBwJ'><tfoot id='ckBwJ'></tfoot><dl id='ckBwJ'><fieldset id='ckBwJ'></fieldset></dl></div>