HTML5画布-将正方形更改为圆形

(也在jsFiddle:http://jsfiddle.net/kvnm21r1/1/)

我已经尝试使用canvas arc方法,它创建一个圆圈,但不会为它着色.

我不能使用该border-radius属性,因为ctx它不是一个元素.

有什么办法,我可以把我的方块变成圆圈吗？

提前致谢.

您可以使用二次曲线"圆化"方形的直线,直到它们形成圆形.

// change sideCount to the # of poly sides desired
//
var sideCount = 4;


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.fillStyle = randomColor();

var PI2 = Math.PI * 2;
var cx = 150;
var cy = 150;
var radius = 100;

var xx = function (a) {
  return (cx + radius * Math.cos(a));
}
var yy = function (a) {
  return (cy + radius * Math.sin(a));
}
var lerp = function (a, b, x) {
  return (a + x * (b - a));
}

var sides = [];
for (var i = 0; i  100) {
    percent = 100;
  }
  if (percent <0) {
    percent = 0;
  }
}

function drawSides(pct, color) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (pct == 100) {
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, PI2);
    ctx.closePath();
    ctx.fill();
  } else {
    ctx.beginPath();
    ctx.moveTo(sides[0].x0, sides[0].y0);
    for (var i = 0; i 
body{ background-color: ivory; }
canvas{border:1px solid red;}


Animate to Shape
Animate to Circle




2> Mathias Rech..：
JS圈出一个圆圈

要绘制圆形,您需要绘制圆弧并具有起始角度和结束角度.所以你必须使用Pi并定义一个半径.

var canvas = document.getElementById('myCanvas');
var cOntext= canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();