HTML5画布-绘制线段和圆-一个圆使用不同的颜色

debugcn 发表于 Dev

youpilat13

我尝试绘制由线段连接的圆。我希望线段的颜色为黑色，圆圈为蓝色（第一个圆圈除外）（第一个圆圈位于画布的中心，并且必须为黑色）。

这是显示当前结果的捕获：

如您所见，除了第一个圆圈保持蓝色之外，结果是不错的。

这是代码：

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

在这里摆弄

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-23

我来说两句

0条评论

登录后参与评论

来自分类Dev

使用for循环绘制HTML5画布圆

来自分类Dev

HTML 5画布和绘制圆

来自分类Dev

html5画布中心圆

来自分类Dev

在HTML5画布上绘制多个圆的问题

来自分类Dev

如何使HTML5画布图案fillstyle与绘制的对象一起移动？

来自分类Dev

如何使用HTML5画布绘制镜头横截面？

来自分类Dev

使用JavaScript在HTML5画布上绘制大量点

来自分类Dev

使用JavaScript无法绘制到HTML5画布的线条

来自分类Dev

在HTML5画布上使用CSS样式绘制SVG

来自分类Dev

使用javascript和HTML5画布的游戏应用程序的背景

来自分类Dev

html5画布笔划两次，再次绘制第一个笔划

来自分类Dev

html5画布笔划两次，再次绘制第一个笔划

来自分类Dev

Qt 2D画布和HTML5画布的行为不一样

来自分类Dev

根据html5画布上的度数在圆的外边缘上找到x，y坐标

来自分类Dev

在html5画布内绘制图像的一部分

来自分类Dev

在html5画布内绘制图像的一部分

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

实时HTML5画布绘制

来自分类Dev

无法在html5画布上绘制

来自分类Dev

html5画布绘制多个图像

来自分类Dev

HTML5画布图案绘制延迟

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

连续绘制HTML5画布

来自分类Dev

HTML5画布-绘制环形扇形

来自分类Dev

html5画布部分绘制

来自分类Dev

在这种情况下，如何在HTML5画布上重画一个圆？（方法调用与直接使用上下文对象相比）

来自分类Dev

在这种情况下，如何在HTML5画布上重画一个圆？（方法调用与直接使用上下文对象相比）

来自分类Dev

透明颜色HTML5画布

Related 相关文章

文章