ＨＴＭＬ５で出現した特徴的なタグを抜き出します。
＜ｃａｎｖａｓ＞
スクリプトから画像まで多様。Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
<h2>fillRect()</h2> <canvas id="c1" width="140" height="140"></canvas> <h2>strokeRect()</h2> <canvas id="c2" width="140" height="140"></canvas> <h2>clearRect()</h2> <canvas id="c3" width="140" height="140"></canvas>
onload = function() {
draw1();
draw2();
draw3();
};
/* fillRect()の例 */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect()の例 */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect()の例 */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20, 20, 100, 100);
ctx.beginPath();
ctx.clearRect(50, 70, 60, 30);
}