1

キャンバスの背景に画像を描いています。この画像は毎秒更新されますが、キャンバスはそれよりも頻繁に (0.5 秒ごと) 再描画する必要があります。私が遭遇しているように見える問題は、bgImg 変数から画像データを失ったように見えるため、キャンバスを更新するときに Safari がちらつくことです。Firefox は期待どおりに動作し、ちらつきは発生しません。

これを回避する方法についての手がかりはありますか？本当に明らかな何かが欠けていますか？

このコードをテストするには、以下のコード全体を html ファイルに貼り付けて、ブラウザでロードします。それがすべきことは次のとおりです。

  • キャンバスを作成する
  • 毎秒画像を読み込む
  • 画像を背景として使用して、500 ミリ秒ごとにキャンバスを再描画します。

コードは次のとおりです。

<html>
<head>
<script type="text/javascript">
var bgImg = new Image();
var firstload = false;
var cv;
var ctx;

var updateBackground = function() {
    bgImg.onload = function() {
      firstload = true;
      console.log("image loaded. Dimensions are " + bgImg.width + "x" + bgImg.height);
    }
    bgImg.src = "http://mopra-ops.atnf.csiro.au/TOAD/temp.php?" + Math.random() * 10000000;
    setTimeout(updateBackground, 1000);
  }

  var initGraphics = function() {
    cv = document.getElementById("canvas");
    ctx = cv.getContext("2d");
    cv.width = cv.clientWidth;
    cv.height = cv.clientHeight;
    cv.top = 0;
    cv.left = 0;  
  }

  var drawStuff = function() {
    console.log("Draw called. firstload = " + firstload );
    ctx.clearRect(0, 0, cv.width, cv.height);
    if ( firstload == true) {
      console.log("Drawing image. Dimensions are " + bgImg.width + "x" + bgImg.height);
      try {
        ctx.drawImage(bgImg, 0, 0);                
      } catch(err) {
        console.log('Oops! Something bad happened: ' + err);
      }
    }
    setTimeout(drawStuff, 500);
  }

  window.onload = function() {
    initGraphics();
    setTimeout(updateBackground, 1000);
    setTimeout(drawStuff, 500);
    }
    </script>

    <style>
body    {
   background: #000000;
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
   color: #cccccc;
   }

.maindisplay {
       position:absolute;
       top:    3%;
       left:   1%;
       height: 96%;
       width: 96%;
       text-align: left;
    border: 1px solid #cccccc;
}
       </style>
</head>
<body>
<div id="myspan" style="width: 50%">
<canvas id="canvas" class="maindisplay"></canvas>
</div>

</body>
</html>
4

1 に答える 1

0

あなたの問題は、bgImgロード中に描画していることです。Webkit は、新しい画像の読み込み中に古い画像データをキャッシュしません。新しい画像.srcが設定されるとすぐに画像が消去されます。

これを修正するには、2 つの画像を使用し、最後に有効に読み込まれた画像を使用して、次の画像が読み込まれている間に描画します。

このオンラインの例をここに置きました：http://jsfiddle.net/3XW8q/2/

スタック オーバーフローの後世のために簡略化:

var imgs=[new Image,new Image], validImage, imgIndex=0;

function initGraphics() {
  // Whenever an image loads, record it as the latest-valid image for drawing
  imgs[0].onload = imgs[1].onload = function(){ validImage = this; };
}

function loadNewImage(){
  // When it's time to load a new image, pick one you didn't last use
  var nextImage = imgs[imgIndex++ % imgs.length];
  nextImage.src = "..."+Math.random();
  setTimeout(loadNewImage, 2000);
}

function updateCanvas(){
  if (validImage){ // Wait for the first valid image to load
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(validImage, 0, 0);
  }
  setTimeout(updateCanvas, 500);
}
于 2012-04-09T19:57:55.970 に答える