代码之家 › 专栏 › 技术社区 › Bob

如何在圆内画笔画?

html5-canvas javascript

Bob · 技术社区 · 11 年前

有没有一种简单的方法可以在一个圆圈内画笔画(不需要画两个圆圈和类似的变通方法)?如果我这样做:

context.beginPath();
context.arc(200, 200, 93, Math.PI / 2, Math.PI, true);
context.fillStyle = '#FF6A6A';
context.fill();
context.lineWidth = 20;
context.strokeStyle = '#FF0000';
context.stroke();

我明白了:

enter image description here

笔划部分绘制在图形外部(用绿色圆圈标记),而我需要它在内部。

1 回复 | 直到 11 年前

ericjbasti 11 年前

应更改半径以补偿线宽:

context.beginPath();
context.arc(200, 200, 93, Math.PI / 2, Math.PI, true);
context.fillStyle = '#FF6A6A';
context.fill();
context.lineWidth = 20;
context.strokeStyle = '#FF0000';
context.beginPath();

// the radius of 93 - half the line width
context.arc(200, 200, 93-10, Math.PI / 2, Math.PI, true);

context.stroke();

JS箱: http://jsbin.com/qamuwumiri/edit?html,js,output

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前