Question

所以我的印象是在HTML5画布上渲染设计会非常快。我正在使用以下代码，我认为渲染时间不到一秒，但总共需要 2分钟。

代码：

 <script>
var canvas = document.getElementById("canvas")
    ctx = canvas.getContext('2d')
    maxW = window.innerWidth
    maxH = window.innerHeight
    x = -1
    numLeft = 15

//maxW = 300
//maxH = 300
canvas.setAttribute("width", maxW)
canvas.setAttribute("height", maxH)
ctx.fillStyle = "rgba(0,0,0,.5)"

for(var j = 0; j < maxH; j++){
  for(var i = 0; i < maxW; i++){
    if(numLeft < 0){
      if(x == -1){
        ctx.fillStyle = "rgba(127,127,127,.5)"
        //numLeft += 12
        numLeft += 5
      }
      else{
        ctx.fillStyle = "rgba(0,0,0,.5)"
        //numLeft += 24
        numLeft += 15
      }
      x *= -1
    }
    ctx.fillRect(i,j,i+1,j+1)
    numLeft--
  }
  //numLeft -= 5 this one's crazy :D
  numLeft -= 3
}

它应该用黑色和灰色绘制斜条纹。但同样，它需要永远呈现并且会使大多数人的浏览器崩溃。有关如何加快速度的任何提示吗？

Answer 1

据我所知，由于评论不能被接受作为答案，我将张贴@pimvdb评论作为答案。问题在于fillRect()被调用的方式，它被称为好像所有参数都是坐标(x, y, x2, y2)，而事实上参数是坐标和维度(x, y, w, h)的组合。 / p>

我确认这是使用this jsFiddle的代码中的主要性能问题。

如上所述，您可以进行其他性能改进，例如预渲染和使用线渐变，但这可以解决即时性能问题。在我的Chrome测试中，性能从6秒变为不到1秒。

您是否尝试过performance suggests on html5rocks.com？

Answer 2

基于像素的操作几乎总是很昂贵，因为你必须经过每个像素并对其进行着色（1000x1000尺寸→1 000 000，一百万，像素!!!）。当您知道设计的外观时，应始终找到优化性能的方法。您可以通过使用较宽条纹的颜色填充画布来改进您的示例，然后仅遍历需要更改的像素（还要确保maxH和maxW是Canvas的大小而不是内窗口。）

更简单快捷的方法是使用moveTo和lineTo命令实际绘制线条。

在HTML5画布上设计 - 如何加快渲染速度

2 个答案: