ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
【旧版】HTML5 Canvas入門
JavaScriptを使って図形を描画できるHTML5のCanvasについて学びます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
詳解JavaScript Canvas編
JavaScriptで図形を描画することができるCanvasについて学んでいきます。
0%
動画レッスン一覧
(33)
#01 Canvasを使ってみよう
(02:42)
無料公開中
概要
完成版の確認
必要となる知識
対応ブラウザ
作業用フォルダの説明
index.htmlの作成
未完了
#02 JavaScriptを書く準備をしよう
(02:49)
無料公開中
main.jsの作成
未完了
#03 stage要素を取得しよう
(02:19)
無料公開中
contextオブジェクトの取得
未完了
#04 矩形を描画してみよう
(02:25)
無料公開中
strokeRect
fillRect
clearRect
未完了
#05 高解像度のディスプレイに対応しよう
(02:58)
無料公開中
高解像度ディスプレイへの対応
devicePixelRatio の取得
未完了
#06 塗りと線を設定しよう
(01:53)
線の色
塗りの色
線の太さ
未完了
#07 アニメーションさせてみよう
(02:31)
アニメーションの設定
未完了
#08 オブジェクトにまとめよう
(02:32)
Appオブジェクトの作成
未完了
#09 車をオブジェクト化しておこう
(02:12)
Carオブジェクトの作成
未完了
#10 車を描画してみよう
(02:49)
Carの描画
未完了
#11 地面を作ってみよう
(01:48)
Groundオブジェクトの作成
未完了
#12 山をオブジェクト化しておこう
(01:34)
Mountainオブジェクトの作成
未完了
#13 パスを使って山を描こう
(02:41)
beginPath()
moveTo()
lineTo()
fill()
未完了
#14 もっとパスを使ってみよう
(01:14)
stroke()
closePath()
未完了
#15 円弧を描いてみよう
(02:07)
円弧の描画
未完了
#16 太陽を描いてみよう
(02:33)
円の描画
未完了
#17 円形グラデーションをかけてみよう
(02:26)
円形グラデーション
未完了
#18 線形グラデーションをかけてみよう
(02:09)
線形グラデーション
未完了
#19 タイヤを描いてみよう
(02:29)
タイヤの描画
未完了
#20 save()、restore()を使ってみよう
(02:03)
save()
restore()
未完了
#21 座標空間を意識してみよう
(02:13)
Gridオブジェクトの作成
未完了
#22 座標空間にグリッド線をひいてみよう
(02:25)
Gridの描画
未完了
#23 座標空間を変形させてみよう
(02:34)
translate()
scale()
rotate()
未完了
#24 タイヤを作り込んでいこう
(02:25)
座標空間の拡大
未完了
#25 タイヤを回転させてみよう
(01:42)
回転アニメーション
未完了
#26 テキストを扱ってみよう
(02:25)
テキストの描画
未完了
#27 テキストの位置をあわせよう
(02:53)
テキストの配置
未完了
#28 イベントの設定をしてみよう
(01:48)
クリックイベントの設定
未完了
#29 画像を扱ってみよう
(02:41)
画像ファイルの読み込み
背景パターンの作成
未完了
#30 コードをきれいにしていこう
(02:30)
不要なコードの削除
未完了
#31 変数の有効範囲を狭くしよう
(02:18)
変数の有効範囲を狭める
未完了
#32 長過ぎるメソッドを整理しよう
(02:44)
Carオブジェクトの整理
未完了
#33 アプリを完成させよう
(02:18)
クリックイベント
画像読み込み
未完了
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2017年3月21日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript