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

今回から<canvas>要素です。これもHTML5からの新要素(IE8以下は未対応です)

<canvas>は、JavaScriptで描くグラフィックスを表示する領域を作る要素です。
canvasのために用意されたソースコードを使って、JavaScriptでベクターを描画(Illustratorでおなじみの描画形式ね)できたり、ビットマップのピクセルを操作したり、とにかく描画に関してはいろいろなことができます。
それが専用ソフト無しで、JavaScriptだけでブラウザに表示できるのですから、画期的な要素です。
(当然 HTML5に対応していないブラウザはムリ。IE8以下は未対応です)

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

<canvas>要素そのものは、すごく単純。
専用の属性は、縦横のサイズを決める width属性、height属性の2つだけです。
(縦横のサイズは、この属性を使わずに、CSS や JavaScript で指定してもOK)
あとは id属性で名前を付けておき、JavaScriptによる描画を書き出す場所とします。

<script>
<!-- idで描画する <canvas>要素を指定。(scriptの内容については今後いろいろやっていきます) -->
</script>
<canvas  id="canvas1" width="400" height="200">
<p>お使いのブラウザはcanvas要素に対応していません(などと代替コンテンツを入れられます)</p>
</canvas>

実際の描画は JavaScript を使うので、
「canvas要素を使う = JavaScript を使う」ということになりますね。
JavaScript があまり得意でないと、ちょっと敷居が高いですが、
キャンバスのために用意された JavaScript のプロパティやメソッドを覚えれば、ある程度のことはできるはず。ですので勉強して行こうと思います。

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

<canvas> 要素のために、JavaScript でいろいろなメソッドが用意されて、かなりオモシロイことができます。例えばこんなことが…。

背景がおもしろい「tech.kayac.com」
株式会社カヤックさんのブログです。
グラデーションをかけた円をランダムに配置し、重なりのプレンド方法でライトのように見せていて、ロードのたびにランダムに変化します。
canvas でこのような背景は作れるようになりたいですね。

おなじく株式会社カヤックさんの「 jsdo.it 」
「 jsdo.it 」は、ブラウザ上で JavaScript のテストを書いたり、コードを共有・評価したりコメントしたり交流できるサイト。
タグ canvas を選ぶと、いろいろサンプルが出てきます。

で、いろいろできるようになるためには、やっぱり基本。
図形を描いたり、画像を読み込んでピクセル操作するなど、まずは基本的なことを理解したいです。
サンプルを作りながら基本を勉強して行こうと思います。

次回予告

今回は、<canvas>要素についてのみ。
次回からは実際にJavaScriptでグラフィクスを作って<canvas>要素内に描画していきます。

まずは<canvas>で、基本的な図形を描いてみます。
四角形、三角形、円弧、途中で途切れた円弧を作ります。
それぞれの図形を、線で描く、塗りつぶす、色の透明度を指定するといった基本もトライ。
また、円弧と beginPath()、closePath() を使って扇型を作り、円グラフも作ってみます。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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