【canvas】円を描く

by tea4two

HTML

<canvas width="600" height="300" id="c1"></canvas>

CSS

#c1 {
    border: 1px solid #ccc;
}

JavaScript

/* style for C1 */

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

/*赤の塗り円を描く*/
context.fillStyle = "red"; //円の色
context.beginPath(); //作図開始
context.arc(150, 150, 100, 0, Math.PI*2, true); //円の規定
context.fill(); //塗り円・線の円指定

/*青の塗り円を重ねて描く*/
context.fillStyle = "blue";
context.beginPath();
context.arc(150, 150, 50, 0, Math.PI*2, true);
context.fill();

/*線の真円を描く*/
context.beginPath(); 
context.arc(350, 80, 60, 0, Math.PI*2, false);
context.stroke();

/*緑の塗りで２００°の円を書く*/
context.beginPath(); 
context.arc(350, 200, 60, 10 * Math.PI / 180, 160 * Math.PI / 180, true);
context.fillStyle = "green";
context.fill();