[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で描画していきます。
次回はまず、四角形、三角形、円弧などの基本的な図形を描いてみます。
応用で円グラフも作ってみます。
- 関連記事
-
- [69-8] Canvasでテキストを描画しよう
- [69-7] Canvas上の重なった描画領域を指定しよう (globalCompositeOperationプロパティ)
- [69-6] Canvasにマウスの動きに合わせて描画しよう (クリックやマウスムーブとの組み合わせと Math.random)
- [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
- [69-4] Canvasに画像を描画しよう(トリミングやクリッピングも)
- [69-3] Canvasに曲線を描こう(線のスタイルも)
- [69-2] Canvasに基本的な図形を描こう
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク