Performance 是否可以在画布上的一条路径中绘制多个填充圆

我试图在HTML5画布绘图代码中进行性能优化。 我特别关注的是填充的圆和线。对于线路，我做了如下优化： 对于线路的每一段，它都执行以下操作：

• 开始路径
• 搬到
• 排队
• 近路
• 笔划

一旦我们打开路径一次，对所有点执行moveTo和lineTo，然后关闭路径并执行笔划，我们就得到了改进。性能增益相当不错

我尝试对填充圆做类似的事情。现在以类似方式渲染的填充圆： 对于每个圆：开始路径、绘制圆弧、设置形状填充样式、填充。 Test（）表明一次渲染和填充多个圆会更快。 但是，我需要在每次调用arc之前使用moveTo，否则我将得到不正确的结果： 以下是我的期望：

函数render2（x，y，context）{
//x、y是要在单个路径中渲染的点阵列
context.beginPath（）；
对于（变量i=0；i

---

所以问题是：有没有一种方法可以在画布上的同一路径上绘制多个相同颜色的填充圆，而不使用moveTo？moveTo会导致性能回归。

任何其他方法都会比

moveTo

更笨拙，产生的性能更低

删除第二位代码中的

closePath

。

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
对于（var i=0；ii如果所有圆的半径和颜色相同，则可以在缓冲区画布上绘制一次，然后使用drawImage（bufferCanvas，x，y）@VitaliyGanzha重新绘制缓冲区。只需取消注释
moveTo
，效果良好：：-）祝您的项目好运！
function render2(x, y, context){
            // x, y are arrays of points to render in a single path
            context.beginPath();
            for (var i=0; i< x.length; i++){
                //context.moveTo(x[i], y[i]);
                context.arc(x[i], y[i], 5, 0, 2 * Math.PI, false);
            }
            context.closePath();
            context.fill();          
        }