iOS上で動的に生成されたアニメーションキャンバス画像にアーティファクトが表示される

Question

純粋なJavaScript（jQueryやその他のサードパーティ製ライブラリなし）を使用して、WeChat（iOSとAndroid）のHTML5 Webアプリケーションを作成しています。私は、ユーザーが選択した画像要素に基づいて、芸術的に見えるアニメーションを画面上に生成しています。 JSは1フレームごとにキャンバスに描画されますが、これは驚くほどうまくいきます（iPhone 5のfpsは50〜60、Nexus 4は60fpsです）。

要素はCanvas2D変換を使用して描画されます。残念ながら、一部のIP権の問題のために、私はここで正確なコードを投稿することができないので、私は少し取り除かオフバージョンを提供しています：

キャンバスのinit：描画に使用

app.init = function() 
{ 
    this.canvas = document.createElement("canvas"); 
    this.ctx = this.canvas.getContext("2d"); 
    this.ctx.canvas.width = 800; 
    this.ctx.canvas.height = 800; 
} 

画像要素：

app.onResourcesLoaded = function() 
{ 
    this.elements = new Array(); 
    this.elements.push(this.getImageByID("blue")); 
    this.elements.push(this.getImageByID("green")); 
    this.elements.push(this.getImageByID("red")); 
    this.elements.push(this.getImageByID("yellow")); 
    this.elemnum = this.elements.length; 
} 
app.getImageByID = function(id) 
{ 
    // looks up into loaded images, find the one with provided id 
    // and returns image object, or null if none found. 
    // If found, returned value is object of following structure: 
    var foundImage = { 
     image: imageObject, 
     position: { x:0.0, y:0.0 }, 
     rotation: 0.0, 
     scale: 1.0, 
     center: { x:0.5*imageObject.width, y:0.5*imageObject.height } 
    }; 
    return foundImage; 
} 

を

キャンバスの描画：AndroidとiOSで

// This function is executed using requestAnimationFrame or setInterval (if requestAnimationFrame is not available) 
app.drawImage = function() 
{ 
    var elapsedTime = this.calcElapsedTime(); // returns time between this and previous frame 
    this.animateElementsTransformation(elapsedTime); // goes through each of elements and updated position, rotation and scale data. 

    // draws first background image as base 
    this.ctx.drawImage(backgroundImage, 0, 0); 
    for(var i = 0; i<this.elemnum; i++) 
    { 
     var e = this.elements[i]; 
     this.ctx.save(); 
     { 
      this.ctx.translate(e.position.x, e.position.y); 
      this.ctx.rotate(e.angle); 
      this.ctx.scale(e.scale, e.scale); 
      this.ctx.drawImage(e.image, -e.center.x, -e.center.y); 
     } 
     this.ctx.restore(); 
    } 
} 

を問わず、すべてが素晴らしいのpで素晴らしい作品エラー。しかし、iOS、WeChat、またはスタンドアロンのSafariでは、時には（例えば数秒に1回）、画面全体に（1つのエッジから別のエッジへ）のような、約1ピクセル幅の黒い直線が見えます。私はチェックしており、これらの線は要素の位置/方向/スケールには全く関係しません。キャンバス全体が実際にはいくつかの三角形で作られ、ブラウザがそれらをリフレッシュするのに問題があるかのように、それらは常に同じ場所に表示されます。彼らはあまり明白ではなく、数秒で一度しか現れません。

誰もこれまでに遭遇したことはありますか？ Safariのバグですか、GPUドライバのバグでしょうか？あるいは私は何か間違っているのですか？

Answer 1

私はフィギュアそれを持っている：私は描画された画像の幅でオフセット編、二回1枚の画像を描画することによって作られた背景を「スクロール」してい

を。私は翻訳を使用するので、翻訳の増分は浮動小数点ではありません。画像フィルタリングのために、2つの描画された画像間の接続エッジで背景が表示されることがあります。この問題。

丸めた値に変換して解決しました。誰もが同じ問題に遭遇した場合:-)