Canvasで強いてみる

Readme
JavaScript 92 lines
HTML 15 lines
CSS 5 lines

もうブームは去ってしまいましたが、canvasで強いてみるコードです。
正式名称が分からないので、変数名とか適当です。

Canvasで強いてみる

var canvas;
var ctx;
var src;

window.onload = function() {
	canvas = document.getElementById('icon');
	ctx = canvas.getContext('2d');
};

function useDefault() {
	src = 'http://jsrun.it/assets/7/V/H/m/7VHm4.png';
	document.getElementById('control').style.display = 'block';
	loadImage();
}

function loadImage() {
	if (!ctx) return;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	    
	var img = new Image();
	img.src = src;
	img.onload = function() {
		canvas.width = img.width;
		canvas.height = img.height;
		ctx.drawImage(img, 0, 0);
		shiiru();
	};   
}

function shiiru() {
	if (!ctx) return;
	
	var n = parseInt(document.getElementById('num').value);
	var radius = parseInt(document.getElementById('radius').value);
	var r = canvas.height > canvas.width ? canvas.height : canvas.width;
	var color = 'rgba(' + document.getElementById('red').value + ', ' +
				document.getElementById('green').value + ', ' +
				document.getElementById('blue').value + ', ' +
				document.getElementById('alpha').value + ')';
	var initDeg = parseInt(document.getElementById('initial').value);
	var degree = parseInt(document.getElementById('degree').value);

for (var i=0; i<n; i++) {
		var startDeg = 360 / n * i + initDeg;
		var endDeg = startDeg + degree;
		var centerX = canvas.width / 2 + radius * Math.cos(getRadian(360 / n * i));
		var centerY = canvas.height / 2 + radius * Math.sin(getRadian(360 / n * i));
		drawSector(ctx, centerX, centerY, r, startDeg, endDeg, color);
	}
}

function drawSector(target, centerX, centerY, radius, startDeg, endDeg, fillColor) {
	target.beginPath();
	target.moveTo(centerX, centerY);
	target.arc(centerX, centerY, radius, getRadian(startDeg), getRadian(endDeg));
	target.fillStyle = fillColor;
	target.fill();
}

function getRadian(degree) {
	return degree * Math.PI / 180;
}

Canvasで強いてみる

もうブームは去ってしまいましたが、canvasで強いてみるコードです。正式名称が分からないので、変数名とか適当です。var canvas; var ctx; var src; window.onload = function() { canvas = document.getElementById('icon'); ctx = canvas.getContext('2d'); }; function useDefault() { src = 'http://jsrun.it/assets/7/V/H/m/7VHm4.png'; document.getElementById('control').style.display = 'block'; loadImage(); } function onFileChanged(e) { document.getElementById('control').style.display = 'none'; if (!window.File) { alert('File API が利用できません。サンプルを使ってください。'); if (!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); return; } if (!e.files[0].type.match(/image.*/)) { alert('画像ファイルを選択してください。'); if (!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); return; } var fileReader = new FileReader(); fileReader.onload = function(e) { src = e.target.result; document.getElementById('control').style.display = 'block'; loadImage(); }; fileReader.onerror = function(e) { alert('ファイル読み取り中にエラーが発生しました。'); if (!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); }; fileReader.readAsDataURL(e.files[0]); } function loadImage() { if (!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = src; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); shiiru(); }; } function shiiru() { if (!ctx) return; var n = parseInt(document.getElementById('num').value); var radius = parseInt(document.getElementById('radius').value); var r = canvas.height > canvas.width ? canvas.height : canvas.width; var color = 'rgba(' + document.getElementById('red').value + ', ' + document.getElementById('green').value + ', ' + document.getElementById('blue').value + ', ' + document.getElementById('alpha').value + ')'; var initDeg = parseInt(document.getElementById('initial').value); var degree = parseInt(document.getElementById('degree').value); for (var i=0; i<n; i++) { var startDeg = 360 / n * i + initDeg; var endDeg = startDeg + degree; var centerX = canvas.width / 2 + radius * Math.cos(getRadian(360 / n * i)); var centerY = canvas.height / 2 + radius * Math.sin(getRadian(360 / n * i)); drawSector(ctx, centerX, centerY, r, startDeg, endDeg, color); } } function drawSector(target, centerX, centerY, radius, startDeg, endDeg, fillColor) { target.beginPath(); target.moveTo(centerX, centerY); target.arc(centerX, centerY, radius, getRadian(startDeg), getRadian(endDeg)); target.fillStyle = fillColor; target.fill(); } function getRadian(degree) { return degree * Math.PI / 180; }<input type="button" onclick="useDefault()" value="サンプル画像を使う"></input> または <input type="file" onchange="onFileChanged(this)"></input> <div id="canvas"> <canvas id="icon"></canvas> </div> <div id="control"> 扇形の数：<input type="number" value="8" id="num"></input><br /> 扇形をずらす距離：<input type="number" value="20" id="radius"></input><br /> 扇形の角度：<input type="number" value="22.5" id="degree"></input><br /> 扇形の初期角度：<input type="number" value="-11.25" id="initial"></input><br /> 強いるときの色（赤）：<input type="number" value="255" id="red" max="255" min="0"></input><br /> 強いるときの色（緑）：<input type="number" value="255" id="green" max="255" min="0"></input><br /> 強いるときの色（青）：<input type="number" value="255" id="blue" max="255" min="0"></input><br /> 強いるときの透明度：<input type="number" value="0.5" id="alpha" max="1" min="0" step="0.01"></input><br /> <input type="button" value="強いる" onclick="loadImage()" /> </div>body { background-color: #DDDDDD; } #control { display: none; }