[69-1] canvas要素でグラフィックスを表示する領域を作ろう

最終更新日:2019年02月06日  (初回投稿日:2014年03月25日)

<canvas>要素は、グラフィックスを表示する領域を作る要素です。
これもHTML5からの新要素です。

専用のJavaScript(Canvas API )を使って、<canvas>要素内に図形を描いてそれを変形・装飾したり、ビットマップ画像のピクセル操作をしたり、アニメーションを作ったりできます。この仕様を Canvas と言います。
というわけで、<canvas>要素は、Canvas を表示する領域を作る要素です。

HTML上でグラフなどの図形を表示するには、画像ファイル(jpegとかpngとか)を別に用意する必要がありました。これを、外部ファイルやプラグインなどを使わずに、HTML上に直に書けるよう作られた仕様が Canvas です。

<canvas>要素は、<img>要素と違って「終了タグ」があります。
<canvas>〜</canvas>の間に、Canvasに未対応の古いブラウザ向けに代替えコンテンツを入れることができます。

使用する要素 <canvas> 〜 </canvas>
<canvas>の属性 width
height
グローバル属性

<canvas>要素そのものは すごく単純で、専用の属性は、縦横のサイズを決める width、height属性の2つです。 (サイズは CSS や JavaScript での指定も可)

あとは <canvas>要素に id属性で名前を付けるだけ。
JavaScriptによる描画を書き出す場所と指定します。

<script>
  // canvas要素の id を指定して、描画用のスクリプトを書きます
  // この部分は、次回以降の記事で基本を説明します
</script>

<canvas id="canvas1" width="400" height="200">
  <!--↓代替えコンテンツを入れることもできます-->
  <p>お使いのブラウザはcanvas要素に対応していません</p>
</canvas>

実際の描画は JavaScript を使うので、Canvasを使う = JavaScript を使う ということになります。
JavaScript が得意でないと、ちょっと敷居が高いですが、Canvasのために用意されたスクリプトをある程度覚えれば、そこそこのことはできるはず。ですので勉強して行こうと思います。

Canvasで何ができるか見てみよう!

実際に Canvasを使ったサイトを探してみました。
(クリックで別ウィンドウで開きます)

WRASS NETWORK

トップメッセージ部分の背景に Canvasでラインアニメーションが描かれています。

株式会社キュー

ビジターが赤ペンで丸などを描くと、中に動画が現れます。
Canvasの実装は株式会社カヤックさんが担当されたそうで、その紹介がこちらに載っています↓
面白法人カヤックが伝授!Canvasで「一度見たら忘れられない」Webサイトをつくる5つのワザ|ヒカ☆ラボレポート

jsdo.it

jsdo.it は、JavaScriptを中心にコードの共有など交流ができるサイト。
タグ canvas を選ぶと、色んな人が作った Canvasのサンプルを見ることができます。

上記のようなことができるようになるための第一歩は、やはり基礎。
この「ほんっとに...」では、基本的なこと(図形を描く、画像を読み込んでピクセル操作するなど)をサンプルを作りながら理解し、記事にしていこうと思います。

次回予告

次回からは実際に Canvasで描画していきます。

次回はまず、四角形、三角形、円弧などの基本的な図形を描いてみます。
応用で円グラフも作ってみます。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2023/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.