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

{
	strokeColor : 線の色,
	strokeWidth : 線の幅,
	fillColor   : 塗りつぶしの色
}

戻り値

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

デモ

JavaScript逆引きリファレンス一覧へ戻る