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

Question

On an HTML5 canvas I can't find a method to make colored circles. I've been consulting this as a reference.

Here is my current attempt

 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;"> 

(Also on jsFiddle: http://jsfiddle.net/kvnm21r1/1/ )

I've tried using the canvas arc method, which creates a circle, but doesn't color it.

I can't use the border-radius property, because ctx is not an element.

Is there any way, I can transform my squares into circles?

Thanks in advance.

Answer 1

You can use quadratic curves to "round-out" the straight lines of your square until they form a circle.

 // 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)); } 

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

 <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> 

Answer 2

JSfiddle with a circle

To draw a circle you'll need to draw an arc and have a starting angle and an ending angle. So you'll have to use Pi and define a radius.

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

Avoid w3schools.com whenever possible. Refer to sites like MDN instead.

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

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