我尝试绘制由线段连接的圆。我希望线段的颜色为黑色,圆形为蓝色(第一个圆形除外)(第一个圆形位于画布的中心,必须为黑色)。
这是显示当前结果的捕获:
如您所见,除了第一个圆圈保持蓝色之外,结果是不错的。
这是代码:
// Get context
context = canvas.getContext('2d');
context.fillStyle = 'white';
context.fillRect(0, 0, 650, 650);
// Draw black segments
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.strokeStyle = 'black';
context.stroke();
// Draw circles (blue except for the first which is black)
context.beginPath();
// Create sub-path
context.moveTo(x0, y0);
context.arc(x0, y0, radius, 0, 2 * Math.PI);
context.fillStyle = 'black';
context.fill();
context.closePath();
// Close sub-path
// Create sub-path
context.moveTo(x1, y1);
context.arc(x1, y1, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path
// Create sub-path
context.moveTo(x2, y2);
context.arc(x2, y2, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path
// Create sub-path
context.moveTo(x3, y3);
context.arc(x3, y3, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path
// Fill all sub-paths
context.stroke();
context.fillStyle = 'blue';
context.fill();
似乎我不能通过以下方式仅填充一个圆圈:
context.beginPath();
// Create sub-path
context.moveTo(x0, y0);
context.arc(x0, y0, radius, 0, 2 * Math.PI);
context.fillStyle = 'black';
context.fill();
context.closePath();
// Close sub-path
如果有人看到有什么问题可以规避此问题。
提前致谢
最佳答案
您需要开始一条新的道路来填写您的蓝色圆圈
context.beginPath();
//draw black circle
context.fill();
context.beginPath();
//draw blue arcs
context.fillStyle='blue
context.fill();
fiddle here