Question

我正在使用纯JavaScript（没有jQuery或任何其他第三方库）为WeChat（iOS和Android等）制作HTML5网络应用程序。我根据用户选择的图像元素在屏幕上生成具有艺术感的动画。 JS在每一帧都画了画布，效果出奇的好（iPhone 5上的fps介于50到60之间，Nexus 4停留在60fps）。

使用Canvas2D转换绘制元素。不幸的是由于一些知识产权问题，我不能在这里发布确切的代码，所以我提供了一些剥离版本：

Canvas 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;
}

画布绘图：

// 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();
    }
}

在Android和iOS上，所有功能都非常出色。然而，在iOS，微信或独立的Safari中，偶尔（例如，几秒钟）我可以看到一些黑色直线，大约1px宽，出现在整个屏幕上（如从一个边缘到另一个边缘）。我检查过，这些线与元素的位置/方向/比例无关。它们看起来总是在同一个地方，好像整个画布实际上是由一些三角形组成，浏览器无法刷新它们。它们不是很明显，只在几秒钟内出现一次。

之前有没有遇到过这个？这是Safari中的一个错误，也许是GPU驱动程序错误？或者我做错了什么？

Answer 1

我已经明白了：

我有“滚动”背景，它是通过绘制一幅图像两次，由绘制图像的宽度偏移。由于我使用翻译，并且翻译增量不是整值而是浮点，因为图像过滤，有时候，在两个绘制图像之间的连接边缘处会看到背景 - 仅在iOS Safari上，而在Android Chrome上没有这个问题。

我通过将translate转换为舍入值来解决它。如果有人遇到同样的麻烦： - ）

工件出现在动态生成的＆amp; iOS上的动画画布图像

1 个答案: