言語を学ぶ

はじめてのCanvas

はじめてのCanvas

チャプター:9

このブックでは、「はじめてのHTML」「はじめてのJavaScript」の学習を終えた方を対象として、HTML5の新機能である「Canvas」について学習していきます。このブックを通して、Canvasを使用した基礎的な線・図形の描画などを学習することができます。

1.Canvasの環境をつくろう

HTMLとJavaScriptがメモ帳一つでつくることができるように、「Canvas」にも複雑な開発環境は必要ありません。このチャプターでは、Canvasを使うためのコーディングを行い、チャプターの最後でCanvasの動作チェックを行います。

26P

2.Canvasで線を描く

このチャプターでは、Canvasを使用して線を描く方法を学習していきます。

26P

3.Canvasで四角形を描く

このチャプターでは、Canvasを使用して四角形を描く方法を学習していきます。

21P

4.Canvasで円を描く

このチャプターでは、Canvasを使用して円を描く方法を学習していきます。

28P

5.Canvasで文字を描く

このチャプターでは、Canvasを使用して文字を描く方法を学習していきます。

21P

6.図形の角度を変える

Canvasでは 基本的な図形を描くことができるだけではなく、描画する図形の角度を変えることもできます。このチャプターでは実際に四角形を使用して、図形の角度の変え方を学習します。

20P

7.影をつける

Canvasでは 図形に影をつけることも可能です。このチャプターでは実際に様々な図形・文字を使用して影のつけ方を学習します。

22P

8.グラデーション

Canvasでは 様々な図形の色を一色で塗ることができるだけでなく、グラデーションをつくることもできます。このチャプターでは、実際にグラデーションをつくっていきます。

29P

9.要素を動かしてみる

描画を一定間隔で繰り返すことで、アニメーションを表現することも可能です。このチャプターでは、四角形を左上から右下に動かすアニメーションを実際につくってみましょう。

26P