トップページ  > Canvas  > Canvasとは?

★Canvasリファレンス

Canvasとは?
広告

Canvasとは、HTML5から新しく追加される図形を描くための技術仕様で、 HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画します。 JavaScript以外のスクリプトでも描画可能ですが、ほとんどの場合JavaScriptが標準的に利用されています。

Canvasでは、JavaScriptを使用してCanvasの技術仕様に定められた書式で描画内容を指定することで、 四角形や円をはじめとする様々な図形の描画、それらの変形、グラデーションを含む色や背景などのスタイル、 画像やテキストとの合成などの表現が可能となります。

Canvasは、図形をスクリプトで指定する点に特徴があります。 スクリプトで図形を描くため、多くの場合、画像に比べてデータ量を軽くすることができるでしょう。 また、図形を画像で作成すると、ユーザーがいつアクセスしても常に同じ画像が表示されることになりますが、 Canvasの場合、サーバーで動的にスクリプトソースを生成すれば、 ユーザーのアクセスごとに異なる図形を表示させることが可能となります。

例えば、ユーザーがアクセスした時点でのリアルタイムのデータを反映したグラフの描画などが可能になるでしょう。 他にも、ユーザーのアクセスごとにランダムに変化するグラデーション表現や、 タイマーと組み合わせることで刻一刻と変形するアニメーションなども作成することができます。 アイデア次第で、今まで画像では実現することが難しかった様々な表現が可能になりそうです。

Canvasは、Internet Explorer9以上、Firefox1.5以上、Opera9以上、Google Chrome、Safariなどでサポートされています。

■Canvasによる作成例

以下は、W3Cのウェブサイトに掲載されているCanvasによる作成例です。 HTMLの<canvas>要素とスクリプトだけで作成されており、 Flashなどのプラグインや画像は一切使用されていません。

HTML + JavaScriptソース

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pretty Glowing Lines</title>
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>

 var context = document.getElementsByTagName('canvas')[0].getContext('2d');

 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);

   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);

 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);

</script>
</body>
</html>
サンプルを別画面で開く
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ