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

HTML5画布-绘制环形扇区

donut-chart canvas html javascript

0

zbeyens · 技术社区 · 8 年前

玩家有一个小视窗,那么就不需要画一个完整的环形。一个部门可以。

我试过ctx。弧线,但它给了我一个和弦。。。

环形扇形 canvas2D?

1 回复 | 直到 8 年前

1

6

markE 8 年前

您的形状是一个笔划弧线:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var strokewidth=100;
var cx=cw/2;
var cy=ch/2;
var PI=Math.PI;
var radius=Math.min(cw,ch)/2-strokewidth/2;
ctx.lineWidth=strokewidth;
ctx.lineCap='butt';
ctx.beginPath();
ctx.arc(cx,cy,radius,-PI*3/4,-PI/16);
ctx.strokeStyle='mediumVioletRed';
ctx.stroke();

body{ background-color:white; }
#canvas{border:1px solid red; }

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

旁白:重画10K x 10K画布将是您的主要(也是巨大的)性能亮点。您可能应该重构您的设计,以避免出现超大画布。

推荐文章

Ajay · Android甜甜圈图表根据时间戳填充多种颜色

6 年前

Boris · 如何使用matplotlib图在tkinter中制作圆环图

6 年前

zbeyens · HTML5画布-绘制环形扇区

8 年前

Joe. L · 将渐变添加到第三方纯色圆环图

8 年前

Jeff K · D3环形图图例或悬停标签

10 年前