HTML5 について
HTML5についてちょっとかじってみましょう
HTMLファイルに最低限必要なもの
HTML5 を構成する上で、最低限必要なものは以下の要素です。まえの HTML に比べ、DOCTYPEや charsetの指定が単純になりました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML5について</title> </head> <body> ... </body> </html>
Canvasを使ってみる
Canvasは、JavaScriptを利用して図や絵を描画します。JavaScriptなので、動きをつけることもできます。
function drawRGB() {
var canvas = document.getElementById('canvas1');
if (!canvas || !canvas.getContext) {
return false;
}
var ctext = canvas.getContext('2d');
var circle = Math.PI*2;
// 合成処理
ctext.globalCompositeOperation = "lighter";
// Red
ctext.beginPath();
ctext.fillStyle = 'rgb(255, 0, 0)';
ctext.arc(45, 45, 40, 0, circle, false);
ctext.fill();
// Green
ctext.beginPath();
ctext.fillStyle = 'rgb(0, 255, 0)';
ctext.arc(70, 95, 40, 0, circle, false);
ctext.fill();
// Blue
ctext.beginPath();
ctext.fillStyle = 'rgb(0, 0, 255)';
ctext.arc(95, 45, 40, 0, circle, false);
ctext.fill();
}
SVGを使ってみる
動きが必要なければ、SVGを利用して図や絵を描画することができます。
<svg> <circle cx="50" cy="50" r="40" fill="red" /> <circle cx="75" cy="100" r="40" fill="green" /> <circle cx="100" cy="50" r="40" fill="blue" /> </svg>
