HTML5 Canvas - Изменение квадрата в круг

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

Чтобы нарисовать круг вам нужно нарисовать дугу и имеют начальный угол и конечный угол. Поэтому вам придется использовать 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 2

Избегайте w3schools.com, когда это возможно. Вместо этого используйте сайты, например, MDN.

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

Answer 3

Вы можете использовать квадратные кривые для округления прямых линий вашего квадрата, пока они не образуют круг.

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