是否可以在画布上的一个路径中绘制多个实心圆圈

Question

我正在尝试在HTML5画布绘图代码中进行性能优化。 特别是我看着圆圈和线条。对于线我做了这样的优化： 对于该行的每个部分，它执行以下操作：

• 开始路径
• 转到
• 排到
• 关闭路径
• 笔画

一旦打开路径，我们得到了改进，并且对所有点进行了moveTo和lineTo，并且在那个封闭的路径之后做了Stroke。 Perf的收益非常好。

我尝试为圆圈做类似的事情。现在填充的圆圈以类似的方式呈现： 对于每个圆圈：开始路径，绘制圆弧，设置形状填充样式，填充。 测试（http://jsperf.com/rendering-filled-circle/7）表明一次渲染和填充多个圆圈会更快。 但是，我需要在每次调用arc之前使用moveTo，否则我将得到不正确的结果：https://jsfiddle.net/gaeb9es8/1/ 这是我的期望：https://jsfiddle.net/j4b7jz03/1/

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();          
        }

所以问题是：有没有办法在画布上的同一路径中绘制多个相同颜色的实心圆而不使用moveTo？ moveTo导致perf回归。

Answer 1

任何其他方法都会很尴尬，并且性能低于moveTo。

删除第二位代码中的closePath。

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

ctx.beginPath();
for(var i=0;i<50;i++){
  var cx=Math.random()*canvas.width;
  var cy=Math.random()*canvas.height;
  ctx.moveTo(cx,cy);
  ctx.arc(cx,cy,7,0,Math.PI*2);
}
ctx.fillStyle='red';
ctx.fill();

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;