基本的な図形を描く
JavaScriptで四角形や三角形、円弧を作り、canvas要素内に描画します。
<body>
<canvas id="canvas1" width="678" height="200">
<p>お使いのブラウザはcanvas要素に対応していないので描画できませんでした</p>
</canvas>
<script>
onload = function() {
kihon();
pie();
};
function kihon() {
/* 描画するcanvas要素を idで指定 (変数(cnvs)に代入する) */
var cnvs = document.getElementById('canvas1');
/* 2Dコンテキストをゲット */
var ctx = cnvs.getContext('2d');
/* 四角形_線(strokeStyleで線の色、strokeRect(x,y, width,height)で四角形) */
ctx.strokeStyle = 'rgb(0,191,255)';
ctx.strokeRect(35,50, 100,100);
/* 四角形_塗りつぶし(fillStyleで塗りの色、fillRectで四角形) */
ctx.fillStyle = 'rgb(129,200,49)';
ctx.fillRect(170,50, 160,100);
/* 四角形_くりぬき(clearRectでくりぬき) */
ctx.clearRect(230,60, 40,80);
/* 三角形_(多角形はmoveTo(x, y)で始点、lineTo(x, y)で直線、closePath()で始点に戻る) */
ctx.beginPath();
ctx.moveTo(428, 40);
ctx.lineTo(368, 158);
ctx.lineTo(496, 158);
ctx.closePath();
ctx.fillStyle = '#FFF';
ctx.fill();
ctx.strokeStyle = '#FF9999';
ctx.stroke();
/* 円_線(arc(x, y, radius, startAngle, endAngle, anticlockwise)) */
ctx.beginPath();
ctx.arc(410, 105, 30, 0, Math.PI*2, false);
ctx.strokeStyle = '#6DD900';
ctx.stroke();
/* 半円_塗り */
ctx.beginPath();
ctx.arc(450, 105, 30, 0, Math.PI, false);
ctx.fillStyle = '#FFC926';
ctx.fill();
/* 円_塗り_透明度50% */
ctx.beginPath();
ctx.arc(430, 135, 30, 0, Math.PI*2, false);
ctx.fillStyle = 'rgba(255,153,153,0.5)';
ctx.fill();
/* 円弧_塗り(正円じゃなく、途中で途切れた円弧です) */
ctx.beginPath();
ctx.arc(580, 100, 60, 20*Math.PI/180, 90*Math.PI/180, true);
ctx.fillStyle = '#DBA1AB';
ctx.fill();
}
</script>
<!--↓サンプルではcanvas要素に背景色を付けています↓(本来canvasは透明背景で枠無し)-->
<style>canvas {background: #f8f4ec;}</style>
</body>
円弧と closePath() の応用で、円グラフを描画します。
<body>
<canvas id="canvas2" width="380" height="200">
<p>お使いのブラウザはcanvas要素に対応していないので描画できませんでした</p>
</canvas>
<script>
onload = function() {
kihon();
pie();
};
function pie() {
/* canvas要素 idで指定し、2Dコンテキストをゲット*/
var cnvs2 = document.getElementById('canvas2');
var ctx2 = cnvs2.getContext('2d');
/* まずは扇形の基本 */
ctx2.beginPath();
/* 円弧の中心点をパスの始点にする */
ctx2.moveTo(100,100)
/* 円弧を指定。パスの始点から円弧の始点まで自動的にパスが引かれる */
ctx2.arc(100, 100, 60, 0, Math.PI/2, false);
/* 円弧のパスを終わらせると、自動的に始点に線を引いてパスを閉じてくれる */
ctx2.closePath();
/* 色を指定して塗りつぶす */
ctx2.fillStyle = '#FFCEBE';
ctx2.fill();
/* 円グラフを描く */
/* ピンクの扇形 */
ctx2.beginPath();
ctx2.moveTo(260,100)
ctx2.arc(260, 100, 60, -90*Math.PI/180, 60*Math.PI/180, false);
ctx2.closePath();
ctx2.fillStyle = '#FFCEBE';
ctx2.fill();
/* 黄緑色の扇形 */
ctx2.beginPath();
ctx2.moveTo(260,100)
ctx2.arc(260, 100, 60, 60*Math.PI/180, 170*Math.PI/180, false);
ctx2.closePath();
ctx2.fillStyle = '#D5F558';
ctx2.fill();
/* イエローの扇形 */
ctx2.beginPath();
ctx2.moveTo(260,100)
ctx2.arc(260, 100, 60, 170*Math.PI/180, 230*Math.PI/180, false);
ctx2.closePath();
ctx2.fillStyle = '#F4E43D';
ctx2.fill();
/* ブルーの扇形 */
ctx2.beginPath();
ctx2.moveTo(260,100)
ctx2.arc(260, 100, 60, 230*Math.PI/180, 270*Math.PI/180, false);
ctx2.closePath();
ctx2.fillStyle = '#A1F6F5';
ctx2.fill();
/* テキストの描画 */
ctx2.font = "10pt Arial";
ctx2.fillStyle = '#666';
ctx2.fillText("42%", 275, 95);
ctx2.fillText("30%", 230, 130);
ctx2.fillText("17%", 207, 93);
ctx2.fillText("11%", 230, 65);
}
</script>
<!--↓サンプルではcanvas要素に背景色を付けています↓(本来canvasは透明背景で枠無し)-->
<style>canvas {background: #f8f4ec;}</style>
</body>