Question

我在Ubuntu Linux上使用Firefox 19.0.2。我正在学习HTML5，但发现以下代码的图像反复闪烁。此外，我想要的形象在剧本明星之前完成下载：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta encoding="UTF-8" />
    <title>Hello Canvas</title>
    <script type="text/javascript">
      window.onload = drawCanvas;
      function canvasSupportEnabled() {
        return !!document.createElement('canvas').getContext;
      }
      var Debugger = function() { };
      Debugger.log = function(message) {
        try {
          console.log(message);
        } catch (exception) {
          return;
        }
      }
      var x = 0;
      var y = 0;
      function drawCanvas() {
        if (!canvasSupportEnabled())
          return;
        var theCanvas = document.getElementById("myCanvas");
        var context = theCanvas.getContext("2d");
       context.fillStyle = "#ffffaa";
        context.fillRect(0, 0, 500, 300);
        context.fillStyle = "#000000";
        context.font = "20px Sans-Serif";
        context.textBaseLine = "top";
        context.fillText("Hello World!", 195, 80);
        context.strokeStyle = "#000000";
        context.strokeRect(x, y, 490, 290);
        var platypus = new Image();
        platypus.onload = function() {
          context.drawImage(platypus, x, y);
        }
        platypus.src = "http://www.wildwatch.com.au/uploads/Platypus/PLATYPUSweb1.jpg"
        window.setTimeout(drawCanvas, 200);
        x = x + 5;
        y = y + 5;
      }
    </script>
  </head>
  <body>
    <h1>Hello Canvas.</h1>
    <canvas id="myCanvas" width="500" height="300">Your browser does not support HTML5 canvas.</c
  </body>
</html>

如何解决这两个问题。我需要双缓冲，我该怎么办？如何检测图像的onload事件以完成下载？

感谢。

Answer 1

这将首先加载图像，然后创建并绘制画布。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta encoding="UTF-8" />
    <title>Hello Canvas</title>
    <script type="text/javascript">
        window.onload = drawCanvas;
        function canvasSupportEnabled() {
            return !!document.createElement('canvas').getContext;
        }
        var x = 0;
        var y = 0;

        function drawCanvas() {
            if (!canvasSupportEnabled())
                return;
            var platypus = new Image();
            platypus.onload = function () {
                var theCanvas = document.getElementById("myCanvas");
                var context = theCanvas.getContext("2d");
                context.fillStyle = "#ffffaa";
                context.fillRect(0, 0, 500, 300);
                context.fillStyle = "#000000";
                context.font = "20px Sans-Serif";
                context.textBaseLine = "top";
                context.fillText("Hello World!", 195, 80);
                context.strokeStyle = "#000000";
                context.strokeRect(x, y, 490, 290);
                context.drawImage(this, x, y);
            }
            platypus.src = "http://www.wildwatch.com.au/uploads/Platypus/PLATYPUSweb1.jpg"
        }
    </script>
  </head>
  <body>
    <h1>Hello Canvas.</h1>
    <canvas id="myCanvas" width="500" height="300">Your browser does not support HTML5 canvas.</canvas>
  </body>
</html>

Answer 2

我怀疑问题是setTimeout电话。第一次运行drawCanvas函数会导致图像开始加载。加载图像后，它将在画布上绘制，但由超时引起的后续drawCanvas调用将导致整个画布填充您正在绘制的矩形，从而使图像消失。 / p>

由于图像已经加载，onload回调不会再次触发。

解决这个问题的最简单方法是为图像使用预加载器。基本上不使用当前的window.onload处理程序，而是使用另一个加载图像的函数并将它们存储在一些变量中。加载完图像后，让它调用drawCanvas，您可以修改它以使用其中一个存储的图像。

Answer 3

以下为我做了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta encoding="UTF-8" />
    <title>Hello Canvas</title>
    <script type="text/javascript">
        window.onload = drawCanvas;
        function canvasSupportEnabled() {
            return !!document.createElement('canvas').getContext;
        }
        var x = 0;
        var y = 0;

        function drawCanvas() {
            if (!canvasSupportEnabled())
                return;
            var platypus = new Image();
            platypus.onload = function () {
                var theCanvas = document.getElementById("myCanvas");
                var context = theCanvas.getContext("2d");
                context.fillStyle = "#ffffaa";
                context.fillRect(0, 0, 500, 300);
                context.fillStyle = "#000000";
                context.font = "20px Sans-Serif";
                context.textBaseLine = "top";
                context.fillText("Hello World!", 195, 80);
                context.strokeStyle = "#000000";
                context.strokeRect(x, y, 490, 290);
                context.drawImage(this, x, y);
            }
            x = x + 5;
            y = y + 5;
            setTimeout(drawCanvas, 200);
            platypus.src = "http://www.wildwatch.com.au/uploads/Platypus/PLATYPUSweb1.jpg"
        }
    </script>
  </head>
  <body>
    <h1>Hello Canvas.</h1>
    <canvas id="myCanvas" width="500" height="300">Your browser does not support HTML5 canvas.</
  </body>
</html>

HTML5 Canvas图像闪烁，脚本不等待图像下载

3 个答案: