WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ファビコンとウェブクリップアイコンの設定方法
HOME
次の記事:プラグインを利用したWordPressのガラケー表示対応

HTML5のcanvas要素が思いの外すごかった

Web知識

 

HTML5のcanvas要素を使った図形描画もウェブデザイン技能検定2級の試験範囲です(1問出るか出ないかといったところですが)。ブログの設定も落ち着いたので本日軽く触ってみました。そしてこの要素が持つ可能性にかつてない程の感銘を受けたのですが、とりあえずは基本的な使い方だけをメモしていきます。

 

 

canvas要素とは

 

主にJavaScriptとセットで使用し、ウェブページにグラフィックを描画します。単に図形を描くだけでなく、グラデーションやアニメーション効果を付ける事も出来ます。また、ユーザーの入力に対するリアクションを設定する事で、ゲームのようなグラフィックを実装する事も出来ます。こちらのサイトで数多くの素晴らしい作品が公開されています。

jsdo.it

 

canvasによる花火の表現

上記サイトで公開されている作品の一つです。画面をタッチすると花火のような美しいグラフィックが描画されます。canvasを極めるとバナーや動画のエフェクト作りにも利用出来そうです。

 

 

 

基本的な使い方(矩形の描画)

 

HTML

<html>
<body>
 <canvas id="test" width="600" height="300" style="background-color: #ffffcc;">
  <p>ご利用のブラウザはcanvas要素がサポートされておらず描画出来ません</p>
 </canvas>
</body>
</html>

対象となるcanvas要素をスクリプト側で指定出来るようにid名を振っておきます。

説明し易いので背景色のスタイルを直接指定していますが、普通にCSSに書いてもらって大丈夫です。

描画範囲はwidth=”300″、height=”150″がデフォルト値となります。注意点として、CSSでwidthとheightプロパティに100%を指定しても、属性指定したサイズ(指定がなければデフォルト値)から相対的に描画範囲が拡大するので、表示されるグラフィックがぼやけた感じになります。描画範囲を画面100%にしたい場合はスクリプトで画面幅を取得するしかないようです。

canvas要素内にはcanvas要素をサポートしていないブラウザに対してのメッセージを書きます。

 

スクリプト

<script type="text/javascript">
//ページ読み込みが終わったらdraw関数を実行(※1)
 onload = function() {
  draw();
 }
//ユーザー定義関数
 function draw() {
//変数canvasにtestというID名を持つ要素を格納
  var canvas = document.getElementById('test');
//取得した要素がグラフィック描画出来る場合、処理を実行
  if(canvas.getContext) {
//2次元グラフィックスを描画する準備を整えて変数に格納
   var box = canvas.getContext('2d');
//塗りつぶしの色を指定※初期値は黒
   box.fillStyle = 'rgb(255, 0, 0)';
//塗りつぶし実行※fillRect(基点x座標, 基点y座標, 横線の長さ, 縦線の長さ);
   box.fillRect(100, 50, 300, 150);
  }
 }
</script>

(※1)部分のブロックを消して、body要素に<body onLoad="draw()">というように記述してもページ読み込み後に処理が実行されます。

 

fillRect実行プレビュー

fill(塗りつぶす)

Rect(矩形)

矩形(くけい)の意味を調べると長方形と同義との事です。という事で、x座標100、y座標50を基点に、横幅300、縦幅150の矩形が描画されました。

 

次は塗りつぶしをせずに輪郭線のみの矩形を描画します。

 

 

<script type="text/javascript">
 onload = function() {
  draw();
 }
 function draw() {
  var canvas = document.getElementById('test');
  if(canvas.getContext) {
   var box = canvas.getContext('2d');
//線の太さを指定※初期値は1
   box.lineWidth = 5;
//線の色を指定※初期値は黒
   box.strokeStyle = 'blue';
//輪郭線で矩形描画※strokeRect(基点x座標, 基点y座標, 横線の長さ, 縦線の長さ);
   box.strokeRect(0, 150, 400, 50);
  }
 }
</script>

 

strokeRectプレビュー

線の太さは外側に広がります。

色の指定ですが、青を指定する場合、’blue’;でも’#0000ff’;でも’rgb(0, 0, 255)’;でも問題ありません。ざっと見た感じ、ランダム生成した変数を扱い易いrgb()の形がよく使われている印象です。

 

 

 

パスを使用した描画

次はcanvasにパスを複数打ち付け、それを結び合わせて図形を描画します。

 

<script type="text/javascript">
 onload = function() {
  draw();
 }
 function draw() {
  var canvas = document.getElementById('test');
  if(canvas.getContext) {
   var left = canvas.getContext('2d');
//描画サブパスを初期化(※1)
   left.beginPath();
//パスの開始座標を決定
   left.moveTo(150, 50);
//次のパスの座標指定
   left.lineTo(250, 250);
   left.lineTo(50, 250);
//パスの最終座標と開始座標を閉じる(結ぶ)
   left.closePath();
   left.fillStyle = '#ff00ff';
   left.fill();
//2つ目の図形を描画
   var right = canvas.getContext('2d');
   right.beginPath();
   right.moveTo(450, 50);
   right.lineTo(450, 250);
   right.lineTo(550, 150);
   right.lineTo(350, 150);
   right.closePath();
   right.strokeStyle = '#00ffff';
   right.stroke();
  }
 }
</script>

 

パズを繋いだ図形プレビュー

(※1)サブパスとは…パスを構成する線の一本のことです。

参考リンク: HTMLクイックリファレンス

 

新しく円や線の描画を開始する際は、変数名.beginPath();が必要になります。

 

 

 

円形の描画

円の角度はラジアン単位で指定します。指定したい角度*Math.PI/180の記述でラジアン単位になります。

また、Math.PIの記述で180℃、Math.PI*2の記述で360℃になります。

参考リンク: 角度とラジアン

 

<script type="text/javascript">
 onload = function() {
  draw();
 }
 function draw() {
  var canvas = document.getElementById('test');
  if(canvas.getContext) {
   var round = canvas.getContext('2d');
//(300,150)を中心点に、半径50の円を塗りつぶして描画
   round.beginPath();
//※arc(円の中心座標x, 円の中心座標y, 円の半径, 開始角度, 終了角度, 虚のとき時計周り);
   round.arc(300, 150, 50, 0, Math.PI*2, false);
   round.fillStyle = '#ff0000';
   round.fill();
//(450,150)を中心点に、半径100、角度90℃-270℃の半円を反時計周りに描画
   round.beginPath();
//最後の値をtrueにする事で反時計周り指定
   round.arc(450, 150, 100, 90*Math.PI/180, 270*Math.PI/180, true);
   round.fillStyle = '#00ffff';
   round.fill();
//(150,150)を中心点に、半径120、角度60℃-300℃の輪郭線を時計周りに描画
   round.beginPath();
   round.arc(150, 150, 120, 60*Math.PI/180, 300*Math.PI/180, false);
   round.strokeStyle = '#ff00ff';
   round.stroke();
  }
 }
</script>

 

canvas円形プレビュー

今回変数名を使い回しましたが、自分の解かり易い形でやってもらって構いません。

 

欠けた円fill塗りつぶしプレビュー

紫の円を輪郭線で描きましたが、fill()で描画すると始点と終点が結ばれた状態で塗りつぶされます。

 

 

 

ぼかしと範囲クリア(透明化)

 

<script type="text/javascript">
 onload = function() {
  draw();
 }
 function draw() {
  var canvas = document.getElementById('test');
  if(canvas.getContext) {
   var xxx = canvas.getContext('2d');
//影のぼかし範囲
   xxx.shadowBlur = 5;
//影の色を指定
   xxx.shadowColor = '#000000';
//対象となる図形から相対的に影をx軸移動、y軸移動
   xxx.shadowOffsetX = 5;
   xxx.shadowOffsetY = 5;
//小さな青い矩形を表示
   xxx.fillStyle = 'rgb(0, 0, 255)';
   xxx.fillRect(25,50,50,50);
//色にアルファ値を与えて透明度を設定、0は完全な透明、1は完全な不透明
   xxx.fillStyle = 'rgba(0, 0, 255, 0.5)';
   xxx.fillRect(100,50,400,200);
//透明にする範囲を矩形で指定
   xxx.clearRect(200, 100, 200, 100);
  }
 }
</script>

 

ぼかしと範囲クリアcanvasプレビュー

 

アニメーションを付ける場合はもう少し複雑なコードを書く必要がありますが、基本となる図形描画の説明はこれで終了です。

 

|

0件のコメント

コメント

カテゴリ

月別アーカイブ