#02 Canvas要素を配置しよう | 詳解JavaScript Canvas編 - プログラミングならドットインストール

動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合はヘルプ「動画が見られない場合について」もご覧ください。

この動画を見るには
無料のユーザー登録が必要です

まずは無料でユーザー登録

本のレッスンが完了！

文字起こしを表示する « 前へ次へ »

プレミアムプランに登録すると、全レッスンの文字起こしを見られるようになります。

詳しくみる

Canvas要素をHTMLに配置したあとに、開発のための準備を進めていきます。

canvas要素の配置
CSSの設定
draw()

このレッスンの問題を報告する

Canvas の領域指定が CSS ではなく HTML に書かれているのはなぜですか？

2022年1月27日

'use strict' ではどのようなエラーが検出されるのですか？

2022年1月27日

なぜブロックで囲むと良いのですか？

2022年1月27日

すべての質問と回答（31）

プレミアムプランに登録すると、わからないところを現役エンジニアに質問できます。

質問機能とは？

素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です

詳しくみる

ソースコードを閲覧するにはプレミアムプランへの登録が必要です

詳しくみる

このレッスンの問題を報告する

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>My Canvas</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <script src="js/main.js"></script> </body> </html>

サーバーとの接続が切断されました。ブラウザを再読込してみてください。

保存しました

ファイル構成

index.html
/css/styles.css
/js/main.js

実行結果

ブラウザ実行環境を使ってみよう！

このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。

手元で実際に動作を確認しながら理解を深めていくと良いでしょう。

この機能を利用するにはプレミアムプランへの登録が必要です。

詳しくみる

詳解JavaScript Canvas編

JavaScriptで図形を描画することができるCanvasについて学んでいきます。 (詳細へ...)

ログインして連続再生する動画一覧 (21)

お手本のコードと比較

をお手本のコードと比較しています。異なる箇所は赤色で表示されています。両者のコードに異なる箇所はありません。

お手本のコード

あなたのコード