PREMIUM
【旧版】HTML5 Canvas入門
JavaScriptと組み合わせることで、画像を描画することができるHTML5のcanvas要素について学びます。
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 HTML5 Canvasとは何か？ (01:30) 無料公開中
- Canvasの概要
- 必要となる知識
- 必要となるツール
-
#02 ひな形ファイルを作ろう (02:30) 無料公開中
- HTMLの作成
- canvasタグについて
- myscript.jsの作成
-
#03 はじめての図形描画 (02:17) 無料公開中
- canvas要素の取得
- エラー処理
- コンテクストの取得
- 図形描画
-
#04 四角形を描いてみよう (02:41) 無料公開中
- strokeRect
- fillRect
- clearRect
-
#05 線や塗りのスタイルを変えてみよう (02:41)
- 線の色
- 塗りの色
- 線の太さ
- 角の設定
-
#06 グラデーションを設定してみよう (02:43)
- 線形グラデーションの設定
- 円形グラデーションの設定
-
#07 影と透明度の設定をしてみよう (02:06)
- 影の設定
- 透明度の設定
-
#08 図形を変形させてみよう (02:10)
- 図形の縮小・拡大
- 図形の回転
- 図形の移動
-
#09 線を描いてみよう (02:40)
- beginPath()
- moveTo()
- lineTo()
- stroke()
- closePath()
- fill()
-
#10 曲線を描いてみよう (02:58)
- arc()
- lineCap()
-
#11 テキストを描画してみよう (02:49)
- テキストのスタイルの設定
- fillText()
- strokeText()
-
#12 画像を表示してみよう (01:36)
- 画像の表示
-
#13 画像で背景パターンを作ってみよう (01:51)
- 背景パターンの作成
-
#14 設定を保存、復元してみよう (02:20)
- 設定の保存
- 設定の復元
-
#15 素敵な画像を作ってみよう (1) (02:42)
- ループによる画像の作成
-
#16 素敵な画像を作ってみよう (2) (01:58)
- ロジックの完成
- 動作確認
-
#17 アニメーションを作ってみよう (02:39)
- アニメーションの作成
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2025 dotinstall.com. All Rights Reserved.