canvas要素で星形を描画する
canvas要素で星形を描画するには、次ような方法で実装できます。
関数定義
JavaScript
var drawStar = function(canvas, cx, cy, viewRadius, points, outerRadius, innerRadius, options) {
var x, y, radians, halfRadians, angle, oneAngle, base, height,
ctx, strokeColor, strokeWidth, fillColor;
ctx = canvas.getContext('2d');
outerRadius = (outerRadius) ? outerRadius : 0;
innerRadius = (innerRadius) ? innerRadius : 0;
oneAngle = 360 / points;
strokeColor = (options && options.strokeColor) ? options.strokeColor : '#000';
strokeWidth = (options && options.strokeWidth) ? options.strokeWidth : 0;
fillColor = (options && options.fillColor) ? options.fillColor : '#000';
ctx.save();
ctx.beginPath();
for (var i = 0; i < points; i++) {
angle = -90 + (oneAngle * i);
radians = angle * (Math.PI / 180);
halfRadians = (angle + (oneAngle / 2)) * (Math.PI / 180);
base = (viewRadius + outerRadius) * Math.cos(radians);
height = (viewRadius + outerRadius) * Math.sin(radians);
x = cx + base;
y = cy + height;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
base = (viewRadius - innerRadius) * Math.cos(halfRadians);
height = (viewRadius - innerRadius) * Math.sin(halfRadians);
x = cx + base;
y = cy + height;
ctx.lineTo(x, y);
}
ctx.closePath();
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fill();
}
if (strokeColor !== 'transparent' && strokeWidth > 0) {
ctx.lineWidth = strokeWidth;
ctx.strokeStyle = strokeColor;
ctx.stroke();
}
ctx.restore();
return canvas;
};使い方
| 引数名 | 初期値 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
canvas | canvas要素 | |
| 第二引数 必須 |
cx | 描画を開始する中央位置（X座標） | |
| 第三引数 必須 |
cy | 描画を開始する中央位置（Y座標） | |
| 第四引数 必須 |
viewRadius | 描画する基本半径 | |
| 第五引数 必須 |
points | 点の数 | |
| 第六引数 | outerRadius | 0 | 外側に飛び出す量 |
| 第七引数 | innerRadius | 0 | 内側にへこます量 |
| 第八引数 | options | { strokeColor : '#000', strokeWidth : 0, fillColor : '#000' } |
その他オプション
CSS |
戻り値
canvas要素を返します。
サンプルコード
JavaScript
var sampleElem = document.getElementById('sample-canvas');
var cx = sampleElem.width / 2,
cy = sampleElem.height / 2;
drawStar(sampleElem, cx, cy, 50, 5, 0, 20);