[英]how to fill certain percentage area of circle in color in html canvas?
我的html页面中有9个圆圈。每个圆圈都必须用一定的百分比填充某些颜色。我使用html5画布元素绘制了圆圈。但我只能用颜色填充整个圆圈而不是某些优点area.How我可以实现吗?
Use composite mode: 使用复合模式:
destination-out
destination-out
The main code would be: 主要代码是:
var o = radius * 2, // diameter => width and height of rect
h = o - (o * percent / 100); // height based on percentage
ctx.beginPath();
ctx.arc(x, y, radius, 0, 6.28);
ctx.fill();
ctx.globalCompositeOperation = "destination-out";
ctx.fillRect(x - radius, y - radius, o, h); // this will remove a part of the top
var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.fillStyle = "#28f"; function drawCircle(ctx, x, y, radius, percent) { var o = radius * 2, h = o - (o * percent / 100); ctx.globalCompositeOperation = "source-over"; // make sure we have default mode ctx.beginPath(); // fill an arc ctx.arc(x, y, radius, 0, 6.28); ctx.fill(); ctx.globalCompositeOperation = "destination-out"; // mode to use for next op. ctx.fillRect(x - radius, y - radius, o, h); // "clear" part of arc ctx.globalCompositeOperation = "source-over"; // be polite, set default mode back } (function loop() { ctx.clearRect(0,0,300,150); drawCircle(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })();
<canvas></canvas>
(tip: closePath()
is really not necessary with fill()
as fill()
will close the path implicit, but it's needed if you want to do a stroke()
instead). (tip:
closePath()
实际上不需要fill()
因为fill()
会关闭隐含的路径,但是如果你想做一个stroke()
则需要它。
The essential part being: 关键部分是:
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, radius, 0, 2 * Math.PI * percent / 100);
//ctx.closePath(); // for stroke, not needed for fill
ctx.fill();
var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.fillStyle = "#28f"; function drawPie(ctx, x, y, radius, percent) { ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.fill(); } (function loop() { ctx.clearRect(0,0,300,150); drawPie(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })();
<canvas></canvas>
Almost same as with pie type, but with these changes: 与派对类型几乎相同,但有以下更改:
lineWidth
, see demo below) lineWidth
,见下面的演示) Essential part: 重要组成部分:
ctx.beginPath();
ctx.moveTo(x + radius, y); // cos(0) for x = 1, so just use radius, sin(0) = 0
ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100);
ctx.stroke();
You can adjust gap point using rotation transform or calculating the actual point using trigonometry. 您可以使用旋转变换调整间隙点或使用三角法计算实际点。
var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.strokeStyle = "#28f"; ctx.lineWidth = 8; function drawWedge(ctx, x, y, radius, percent) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.stroke(); } (function loop() { ctx.clearRect(0,0,300,150); drawWedge(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })();
<canvas></canvas>
You can change the starting point for the arc using rotation transform or calculating the point manually using trigonometry. 您可以使用旋转变换或使用三角函数手动计算点来更改圆弧的起点。
To calculate these manually you can do (angles in radians): 要手动计算这些,你可以做(弧度角):
x = radius * Math.cos(angleInRad); // end point for x
y = radius * Math.sin(angleInRad); // end point for y
Just add the total angle to the start angle to get end point. 只需将总角度添加到起始角度即可获得终点。
360° in radians = 2 x PI, so if you want to use angles in degrees, convert them using: 360°弧度= 2 x PI,因此如果您想使用度数角度,请使用以下方法进行转换:
angleInRad = angleInDeg * Math.PI / 180;
var ctx = document.querySelector("canvas").getContext("2d"), pst = 0, dlt = 2; ctx.strokeStyle = "#28f"; ctx.lineWidth = 8; function drawWedge(ctx, x, y, radius, percent) { ctx.translate(x, y); // translate to rotating pivot ctx.rotate(Math.PI * 0.5); // rotate, here 90° deg ctx.translate(-x, -y); // translate back ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.arc(x, y, radius, 0, 2 * Math.PI * percent /100); ctx.stroke(); ctx.setTransform(1,0,0,1,0,0); // reset transform } (function loop() { ctx.clearRect(0,0,300,150); drawWedge(ctx, 70, 70, 60, pst); pst += dlt; if (pst <= 0 || pst >= 100) dlt = -dlt; requestAnimationFrame(loop); })();
<canvas></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.