及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > HTML > HTML5 Canvas

HTML5 Canvas

次世代のHTML仕様である、HTML5を勉強中。
古いブラウザではHTML5が正しく機能しないため、ブラウザを最新の状態へアップデートすることをお勧め。
HTML5に関する情報: HTML5.jp
Canvas の詳細: Canvas

ここでは HTML5 の Canvas についてテスト。
Canvas は、画像やFlashを使わずに、ブラウザ上に図を書くHTML5からの新しい仕様。
JavaScript に図形情報を記述し、ブラウザ上に表示させる。
すごい!
でも、座標をとらなければならなかったり、色を数値で記述しなければならなかったり、かなり面倒なので、”画像やFlashの方がはるかに楽”だということが今回のテストで分かった。

HTML5 Canvas で描画した図形

下の2つ(ドアと円)はHTML5 の Canvas で描画した図形。
古いブラウザではCanvasで描いた図形が表示されないので、
ブラウザをアップデートすることをお勧めします。

ドア
古いブラウザではCanvasで描いた図形が表示されないので、
ブラウザをアップデートすることをお勧めします。


Canvas を描く

Canvas は JavaScript で描画し、HTMLの canvas タグで表示する。

Canvas を表示する

サンプル Javascript で描いた図形。canvas はアニメーションにもできる。 古いブラウザではCanvasで描いた図形が表示されないので、
ブラウザをアップデートすることをお勧めします。
Javascript で記述した描画の指示を、 HTMLの canvas タグで表示する。
HTMLソースコード例。
<canvas id="my_canvas" width="300" height="160"></canvas>
前記の JavaScript の6行目付近
var canvas = document.getElementById('my_canvas');
で指定したID「my_canvas」を canvas 要素の id 名にする。

サンプル JavaScript

Canvas は JavaScript で描画する。
記述例
var my_num = 1;

function init(){
draw();
IntervalID = setInterval('draw()',100);
}

//function stopdraw(){clearInterval(IntervalID);}


function draw() {
my_num ++;
if(my_num == 160){
//	stopdraw();
	my_num = 1;
	}

var canvas = document.getElementById('my_canvas');
if ( ! canvas || ! canvas.getContext ) { return false;}

/* 四角(空)*/
var my_ctx = canvas.getContext('2d');
my_ctx.clearRect(0,0,300,160);//-------clear

var gradsk = my_ctx.createLinearGradient(0,0,0,80);
gradsk.addColorStop(0,'LightBlue');
gradsk.addColorStop(1,'white');
my_ctx.save();//-------save
my_ctx.fillStyle = gradsk;
my_ctx.beginPath();
my_ctx.rect(0,0,300,80);
my_ctx.fill();
my_ctx.restore();//-------restore 

/* 円(太陽) */
var my_ctx = canvas.getContext('2d');
var gradci = my_ctx.createLinearGradient(0,(my_num-30),0,(30+my_num));
gradci.addColorStop(0,'#FF0000');
gradci.addColorStop(1,'#FFFF33');
my_ctx.save();//-------save
my_ctx.fillStyle = gradci;
my_ctx.beginPath();
my_ctx.arc(60, my_num, 30, 0, Math.PI*2, false);
my_ctx.fill();
my_ctx.restore();//-------restore

/* 山 */
var my_ctx= canvas.getContext('2d');
var gradmo = my_ctx.createRadialGradient(150,200,120,150,200,160);
gradmo.addColorStop(0,'#336699');
gradmo.addColorStop(1,'#FFFFFF');
my_ctx.save();//-------save
my_ctx.fillStyle = gradmo;
my_ctx.beginPath();
my_ctx.moveTo(140,20);
my_ctx.lineTo(160,20);
my_ctx.lineTo(280,160);
my_ctx.lineTo(20,160);
my_ctx.closePath();
my_ctx.fill();
my_ctx.restore();//-------restore

}

JavaScript を外部ファイル化

Canvas の描画の指示の JavaScript はページ内 に直接記述してもよいが、記述が長くなるため JavaScript は外部ファイル化するのがお勧め。
JavaScript を記述したファイルを、「my_canvas.js」というファイル名で保存した場合、head に
<script type="text/javascript" src="設置したパス/my_canvas.js"></script>
を記述。
MENU Ξ