如何在html画布中填充颜色圆的某个百分比区域？ [英] how to fill certain percentage area of circle in color in html canvas?

问题描述

我的html页面中有9个圆圈。每个圆圈都必须用一定的百分比填充某些颜色。我使用html5画布元素绘制了圆圈。但我只能用颜色填充enitre圆圈。不是特定的percantage area.How我可以实现吗？

解决方案

油箱，填充圆圈

使用复合模式：

• 使用半径x2表示高度（或宽度）


• 绘制并填充整个圆圈


• 使用复合模式目的地输出


• 在顶部绘制一个填充矩形，表示高度的百分比

主要代码为：

  var o = radius * 2，// diameter => rect的宽度和高度
 h = o  - （o * percent / 100）; //基于百分比的高度
 
 ctx.beginPath（）; 
 ctx.arc（x，y，radius，0,6.28）; 
 ctx.fill（）; 
 
 ctx.globalCompositeOperation =destination-out; 
 ctx.fillRect（x  -  radius，y  -  radius，o，h）; //这将删除顶部
的一部分 

演示

  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; //确保我们有默认模式ctx.beginPath（）; //填充弧ctx.arc（x，y，radius，0,6.28）; ctx.fill（）; ctx.globalCompositeOperation =destination-out; //用于下一个操作的模式。 ctx.fillRect（x  -  radius，y  -  radius，o，h）; //clear部分arc ctx.globalCompositeOperation =source-over; //礼貌，设置默认模式}（函数循环（）{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>  

馅饼类型

• 移动到圆心


• 添加圆弧，这将创建一条从中心到弧线起点的线


• 关闭路径，这将创建一条从弧线末端回到中心的线，并填充

c $ c> fill（） as fill（）将关闭隐含的路径，但如果你想做 stroke（）代替）。




基本部分是：

  ctx。 beginPath方法（）; 
 ctx.moveTo（x，y）; 
 ctx.arc（x，y，radius，0,2 * Math.PI * percent / 100）; 
 //ctx.closePath（）; //用于描边，不需要填充
 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>  





概述圆圈：





与馅饼类型几乎相同，但是有了这些变化：






• 以角度0（或您想要开始的角度）移动到弧的外边缘。


• 将弧添加到路径


• 描边（记得设置 lineWidth ，见下面的演示）






基本部分：

  ctx.beginPath（）; 
 ctx.moveTo（x + radius，y）; // cos（0）for x = 1，所以只需使用radius，sin（0）= 0 
 ctx.arc（x，y，radius，0，2 * Math.PI * percent / 100）; 
 ctx.stroke（）; 
  

您可以使用旋转变换调整间隙点或使用三角函数计算实际点。





演示





  var ctx = document.querySelector（canvas）。getContext（2d） ，pst = 0，dlt = 2; ctx.strokeStyle =＃28f; ctx.lineWidth = 8;函数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>  





使用不同的起点





您可以使用旋转变换或使用三角函数手动计算点来更改圆弧的起点。





要手动计算这些（弧度）：

  x = radius * Math名为.cos（angleInRad）; // x 
 y = radius的终点* Math.sin（angleInRad）; //结束点y 
  

只需将总角度添加到起始角度即可得到终点。 / p>



360°弧度= 2 x PI，因此如果您想使用度数角度，请使用以下方式转换它们：

  angleInRad = angleInDeg * Math.PI / 180; 
  





演示，使用transfrom和逆时针模式旋转





  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）; //转换为旋转轴ctx.rotate（Math.PI * 0.5）; //旋转，这里90°deg ctx.translate（-x，-y）; //翻译回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>  




I have some 9 circles in my html page.Each circle has to be filled with certain color with certain percentage.I have drawn the circles using html5 canvas element.But i was only able to fill the enitre circle with a color and not certain percantage area.How can i achieve that?

解决方案

"Fuel tank", filling of circle

Use composite mode:

• Use the radius x2 for height (or width)
• Draw and fill the complete circle
• Use composite mode destination-out
• Draw a filled rectangle on top representing the % of the height

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

Demo

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>

Pie type

• Move to center of circle
• Add arc, this will create a line from center to start of arc
• Close path, this will create a line from end of arc back to center, and fill

(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).

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

Demo

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>

Outlined circle:

Almost same as with pie type, but with these changes:

• Move to outer edge of arc at angle 0 (or the angle you want to start from)
• Add arc to path
• Stroke (remember to set lineWidth, see demo below)

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.

Demo

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>

Using different starting point

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:

angleInRad = angleInDeg * Math.PI / 180;

Demo, rotated using transfrom and counter-clock-wise mode

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>

这篇关于如何在html画布中填充颜色圆的某个百分比区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！