canvasで図形の見た目を調整する

2015.08.16

canvasでグラデーションや変形などをやってみます。

影と透過の処理

図形に影を付ける処理と、透過する処理をしてみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.fillStyle = '#ff0000';
	ctx.shadowColor = '#333333';
	ctx.shadowOffsetX = 10;
	ctx.shadowOffsetY = 10;
	ctx.shadowBlur = 10;

	ctx.globalAlpha = 0.5;

	ctx.fillRect(0, 0, 200, 200);
}

shadowColor = ‘color‘; 影の色を指定。
shadowOffsetX = num; 影のX方向の距離を指定。
shadowOffsetY = num; 影のY方向の距離を指定。
shadowBlur = num; 影のぼかし具合を指定。
globalAlpha = num; 透明度の指定。
値は0.0～1.0の間で指定。

影と透過の処理のデモページ
　

線形グラデーション

四角形を線形のグラデーションで縫ってみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var grd = ctx.createLinearGradient(0, 0, 0, 200);
	grd.addColorStop(0, '#ff0000');
	grd.addColorStop(0.5, '#00ff00');
	grd.addColorStop(1, '#0000ff');
	ctx.fillStyle = grd;
	ctx.fillRect(0, 0, 200, 200);
}
createLinearGradient(X1, Y1, X2, Y2) 線形のグラデーションの指定。
グラデーションの方向はX1,Y1の座標からX2,Y2の座標へ向かって描画。
addColorStop(num, color) num時点での色を指定する。
numの値は0.0～1.0の間で指定。

線形グラデーションのデモページ1
　

先ほどは上から下にグラデーションを指定しましたが、今度は左下から右上に指定してみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var grd = ctx.createLinearGradient(0, 200, 200, 0);
	grd.addColorStop(0, '#ff0000');
	grd.addColorStop(0.5, '#00ff00');
	grd.addColorStop(1, '#0000ff');
	ctx.fillStyle = grd;
	ctx.fillRect(0, 0, 200, 200);
}

線形グラデーションのデモページ2
　

円形グラデーション

円形のグラデーションです。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var grd = ctx.createRadialGradient(100, 100, 5, 100, 100, 120);
	grd.addColorStop(0, '#ff0000');
	grd.addColorStop(0.5, '#00ff00');
	grd.addColorStop(1, '#0000ff');
	ctx.fillStyle = grd;
	ctx.fillRect(0, 0, 200, 200);
}
createRadialGradient(X1, Y1, r1, X2, Y2, r2) 中心座標X1,Y1半径r1の円から、中心座標X2,Y2半径r2の円に向かってグラデーションを描画。

円形グラデーションのデモページ
　

パターン

指定した図形内に画像をパターン化して表示します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = '01.jpg';
	img.onload = function() {
		var ptn = ctx.createPattern(img, 'repeat');
		ctx.fillStyle = ptn;
		ctx.fillRect(0, 0, 500, 500);
	}
}
createPattern(img, value) img画像をパターンとして表示。
valueはパターンの種類として、repeat, repeat-x, repeat-y, no-repeatのいずれかを指定。

パターンのデモページ
　

拡大・縮小

図形を拡大・縮小します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.fillRect(0, 0, 200, 200);

	ctx.fillStyle = '#ff0000';
	ctx.scale(0.5, 0.5);
	ctx.fillRect(0, 0, 200, 200);
}
scale(X, Y); X,Yで指定した割合だけそれぞれwidthとheightを拡大・縮小する。
基準はcanvasの左上。

拡大・縮小のデモページ
　

回転

図形を回転します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.fillRect(0, 0, 200, 200);

	ctx.fillStyle = '#ff0000';
	ctx.rotate(45 * Math.PI / 180);
	ctx.fillRect(0, 0, 200, 200);
}
rotate(angle); angleで指定しただけ要素を時計回りに回転。
基準はcanvasの左上。
angle部分は 角度 * Math.PI / 180 で指定。

回転のデモページ
　

移動

図形を移動します。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	ctx.fillRect(0, 0, 200, 200);

	ctx.fillStyle = '#ff0000';
	ctx.translate(200, 200);
	ctx.fillRect(0, 0, 200, 200);
}
translate(X, Y); X,Yで指定しただけ図形を移動。

移動のデモページ
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930