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

Question

在HTML5画布上，我找不到制作彩色圆圈的方法。我一直在咨询this作为参考。

这是我目前的尝试

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 100, 100);
ctx.lineJoin = "round";
ctx.lineWidth = "cornerRadius";

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

（也在jsFiddle上：http://jsfiddle.net/kvnm21r1/1/）

我尝试使用画布arc方法创建一个圆圈，但不对其进行着色。

我无法使用border-radius属性，因为ctx不是元素。

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

提前致谢。

Answer 1

您可以使用二次曲线来实现＆＃34;四舍五入＆＃34;你的广场的直线，直到它们形成一个圆圈。

＆＃13;

＆＃13;

// 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 < sideCount; i++) {
  sides.push(makeSide(i, sideCount));
}

var percent = 0;
var percentDirection = 0.50;

$("#toShape").click(function () {
  percentDirection = -0.50;
})

$("#toCircle").click(function () {
  percentDirection = 0.50;
})

animate();

// functions

function animate() {
  requestAnimationFrame(animate);
  drawSides(percent);
  percent += percentDirection;
  if (percent > 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 < sideCount; i++) {
      var side = sides[i];
      var cpx = lerp(side.midX, side.cpX, pct / 100);
      var cpy = lerp(side.midY, side.cpY, pct / 100);
      ctx.quadraticCurveTo(cpx, cpy, side.x2, side.y2);
    }
    ctx.fill();
  }
}

function makeSide(n, sideCount) {
  var sweep = PI2 / sideCount;
  var sAngle = sweep * (n - 1);
  var eAngle = sweep * n;

  var x0 = xx(sAngle);
  var y0 = yy(sAngle);
  var x1 = xx((eAngle + sAngle) / 2);
  var y1 = yy((eAngle + sAngle) / 2);
  var x2 = xx(eAngle);
  var y2 = yy(eAngle);

  var dx = x2 - x1;
  var dy = y2 - y1;
  var a = Math.atan2(dy, dx);
  var midX = lerp(x0, x2, 0.50);
  var midY = lerp(y0, y2, 0.50);
  var cpX = 2 * x1 - x0 / 2 - x2 / 2;
  var cpY = 2 * y1 - y0 / 2 - y2 / 2;

  return ({
    x0: x0,
    y0: y0,
    x2: x2,
    y2: y2,
    midX: midX,
    midY: midY,
    cpX: cpX,
    cpY: cpY,
    color: randomColor()
  });
}

function randomColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="toShape">Animate to Shape</button>
<button id="toCircle">Animate to Circle</button><br>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

JSfiddle with a circle

要绘制圆形，您需要绘制圆弧并具有起始角度和结束角度。所以你必须使用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();

Answer 3

尽可能避免使用w3schools.com。请改为使用MDN等网站。

＆＃13;

＆＃13;

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
var radius = 50; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI*2; // End point on circle
ctx.arc(150, 75, radius, startAngle, endAngle, true);
ctx.fill();

＆＃13;

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

＆＃13;

＆＃13;

＆＃13;