0

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

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

谢谢。

4

3 回答 3

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>
于 2013-07-04T15:44:41.087 回答
0

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

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

修复它的最简单方法是对图像使用预加载器。基本上不要使用当前的window.onload处理程序，而是使用另一个函数来加载图像并将它们存储在一些变量中。一旦它完成加载图像，让它调用drawCanvas您将修改为使用存储的图像之一。

于 2013-07-04T13:56:30.267 回答
0

以下为我做了。

<!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>
于 2013-07-05T09:54:41.930 回答