canvas画复杂像素图案也是用遍历矩形的方法吗？

Question

drawRect({ x, y, w, h, s, c }) {
    // 坐标
    this.ctx.translate(
        ((x + w/2) - (w/2) * s),
        ((y + h/2) - (h/2) * s)
    )
    // 缩放
    this.ctx.scale(s, s)

    for (var i = 0; i < 200; i++) {
        this.ctx.fillStyle = 'black'
        this.ctx.fillRect((i*2), 0, 1, 1)
    }
    this.ctx.draw()
}

像这样，我只是画了200个元素就很不流畅了，所以一定是方法不对咯？
我想简单模拟/r/placeAtlas、pxls.space效果
移动和缩放canvas内容必须重绘canvas吗？这样计算量太大了吧！

Answer 1

算法的优化技巧很多，针对具体场景的算法的优化技巧更多，遍历自然是要遍历，但是肯定充斥着各种高超的优化技巧。

绘图的优化技巧也不少：

1. 分层渲染，修改单个图形的时候，按照各元素图像与需要缩放的元素的相对层级把图形分为三层（或两层）放到一个栈里，这样另外两层（或一层）就不需要重新绘制了，修改完毕再直接 putImageData 渲染；
2. 分块渲染，把需要修改的地方“挖出来”改好，然后再贴回去；
3. 离屏canvas渲染，使用隐藏的 canvas 绘图可以节约性能；
4. 同类图像合并成一条矢量路径最后再调用 ctx.draw 。

使用 webGL 可以开启 GPU 绘图，不局限于 canvas2D 的话，也算是优化途径。