技術標籤：webcanvascss3html

canvas畫圓形進度

/**
 * 圓圈進度
 * @param el dom元素
 * @param num 進度
 * @param color num>0時 字型顏色
 * @param lineColor 有進度-線顏色
 */
function drawCircle1(el, num, color, lineColor) {
  var ctx = el.getContext("2d");
  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  ctx.
 
scale(2, 2); // 放大2倍 通過css調整大小，1倍時會模糊
  ctx.strokeStyle = '#f1f1f1';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(28, 28, 26, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.strokeStyle = lineColor;
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(28, 28, 26, 1.5 * Math.PI, (num / 100 * 2 + 1.5) * Math.PI);
  ctx.
 
stroke();
  ctx.font = "14px Arial";
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  if (num == 0) {
    ctx.fillStyle = '#cccccc'
  } else {
    ctx.fillStyle = color
  }
  ctx.fillText(num + '%', w/4, h/4);
}

// 呼叫
drawCircle1('dom元素', 8, '#FF9500', '#FF9500')

html中

<canvas class
 
="progress" width="110" height="110" id="canv-dom"></canvas>