Javascript HTML5画布上的设计-如何加速渲染

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

代码：

var canvas=document.getElementById（“画布”）
ctx=canvas.getContext（'2d'）
maxW=window.innerWidth
maxH=window.innerHeight
x=-1
numLeft=15
//最大值=300
//最大值=300
canvas.setAttribute（“宽度”，maxW）
canvas.setAttribute（“高度”，最大值）
ctx.fillStyle=“rgba（0,0,0,5）”
对于（var j=0；j

---

它应该以黑色和灰色绘制对角线条纹。但同样，渲染需要花费很长时间，并且会使大多数人的浏览器崩溃。关于如何加快速度的任何提示？

因为据我所知，评论不能被接受为答案，所以我将@pimvdb comment作为答案发布。问题在于调用

fillRect（）

的方式，调用时好像所有参数都是坐标

（x，y，x2，y2）

，而实际上这些参数是坐标和维度的组合

（x，y，w，h）

我确认这是您的代码中的一个主要性能问题

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

---

您是否尝试过？

基于像素的操作几乎总是很昂贵的，因为您必须检查每个像素并对其着色（1000x1000大小）→ 一百万像素！！！）。当您知道设计应该是什么样子时，您应该始终找到优化性能的方法。您可以通过使用较宽条纹的颜色填充画布来改进示例，然后只循环需要更改的像素（还要确保

maxH

和

maxW

是画布的大小，而不是内部窗口）

---

一种更简单、更快的方法是使用

moveTo

和

lineTo

命令实际绘制线条。

否。它们是什么？（这些建议就是。）嘿@JaredFarrish，这些改进与图形编程的一般改进几乎相同。例如，不是多次重新渲染同一事物，而是将其渲染到它自己的画布上一次，然后将该画布绘制到目标画布上多次。这实际上是一种可以用来解决这个问题的技术。还有其他类似的建议，比如一次发送所有的绘图命令——从本质上对它们进行分组。我不知道您是否打算这样做，但是

drawRect（x，y，1，1）

填充一个像素-它是

（x，y，w，h）

。这有助于极大地提高速度，因为当前绘制的像素要多得多（宽度

i+1

和高度

j+1

，因此绘制的像素量呈二次增长）。同意，您可以在这个JSFIDLE中看到差异

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