Question

我正在使用gwt绘制画布。我在每次鼠标移动时将50px 40px位图绘制到屏幕上五十次。看起来像：

void onDraw() {
    for (int x = 0; x < 10; x++) {
        for (int y = 0; y < 5; y++) {
            canvasContext.drawImage(srcImage, x, y, ...);
        }
    }
}

这在桌面浏览器和iphone / ipad上的表现非常出色。在Android上，它基本上无法使用，以大约2 fps的速度绘制。

我想知道是否有任何有效的方法在android上有效地绘制这个小位图。我尝试了一些技巧，但没有真正改善。 Android浏览器的实现是否真的落后于它的ios对手？

由于

Answer 1

这只是因为某种原因直接绘制到画布的机器人垮台。见

Html5 canvas animation slow on Android

一些增加性能的开发技巧

http://www.html5rocks.com/en/mobile/touch/#toc-foo

设备基准测试的一些性能

http://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison

你可以看到droid滞后远远落后。

一些解决方法可能是尝试将动画div单元格用于实体，而不是直接在画布上绘图。没有尝试过自己，但它可能表现更好。

也试着控制你的鼠标移动，我怀疑你正在解雇许多鼠标移动事件，这些事件实际上可以每帧多次绘制quandrangles。你应该有一些类型的更新函数，每帧只调用一次，由一段时间的计时器管理。然后，如果满足应该移动的条件，则更新应更新矩形。而不是试图基于移动鼠标的事件重绘。您的更新功能应该抓取鼠标的坐标，并更新矩形对象的位置。然后让你的绘图功能在更新功能之后立即调用，以在屏幕上实际呈现

init {  //called once on load
   create array of rectangles 50, with default coordinates
}
update { //called once per frame
   get coordinates of mouse
   iterate though array of rects and update coordinates based on mouse position
}
draw { //called after update
   iterate though array of rects and draw them
}

timer { //manages your fps and calls update and draw
   update()
   draw()
}.scheduleRepeating(1000ms/fpsRate)

现在我知道这是一些贫民窟伪代码，但那就是你应该如何渲染对象。也不要在for ...中嵌套for ...这非常糟糕，因为它应该做一个调制而不是

for(int i =0;i < rectArr.length; i++) {
  x = i%10 * rectW
  y = i%5  * rectH
}

新闻好运

多次绘制一个小位图到<canvas>？</canvas>

1 个答案: