Canvasを使うためのJavaScript入門

canvasの領域にJavaScriptで矩形を描く

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
canvas要素で定めた領域に、JavaScriptで矩形を描いてみましょう。描画はcanvas要素から得られるコンテクストというオブジェクトに対して行います。
講師:
04:25

字幕

canvas の領域に矩形 四角を1つ描いてみたいと思います canvas をコントロールする ステートメントを書く前に その JavaScript コードを書く 場所を用意しましょう Script は増えてきますので body 要素ではなく head 要素の方に 加えることにします ここに script 要素を 加えます それから処理は function として 定義することにします 名前は initialize にしました script 要素に定義した function は body 要素から呼びだすことにします 呼び出しは onLoad 属性です そこに function の呼び出しを記述します canvas に絵を描くには 2D コンテクスト というオブジェクトが必要です そのためのステップは2つで まず第一に document.getElementById というメソッドに canvas の id 属性に 定めた値を渡して canvas の参照を取得します 次に この canvas の参照を getContext という メソッドの呼び出しに使い そして引数には これはお約束ごとです 2d という文字を渡します そうすると 2D コンテクストの オブジェクトが得られます それを変数にとって この 2D コンテクストのオブジェクトに対して 描画を行うことになります それでは function に 2つのステートメントを加えます 変数を宣言して document . getElementById です id は canvas 要素に 定めましたので これをコピーして 持ってきましょう そして 2D コンテクストですね その変数名を宣言して canvasElement の入った変数に getContext これはお約束でしたね 2d と入ります そして括弧を閉じます これで canvas 要素を取り出し その canvas 要素から 2D コンテクストのオブジェクトを 作ることが出来ました 次はこの 2D コンテクストの オブジェクトに描画をすることになります 2D コンテクストのオブジェクトに対して 矩形を描くには 2D コンテクストのオブジェクト 「.」で fillRect メソッドを呼び出します 引数には4つありまして 「x 座標」「y 座標」「幅」「高さ」 これらをすべて数値で与えます 2D コンテクストのオブジェクトに対して fillRect メソッドで 矩形 四角形を描いてみたいと思います では 2D コンテクストのオブジェクトに 対して fillRect メソッドで 矩形 四角形を描きます 2D コンテクストの入った 変数に対して fillRect メソッドを呼びだします 引数は4つ 「x 座標」「y 座標」「幅」「高さ」 ということになります ではブラウザで結果を確かめてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です canvas の領域に 矩形が描かれました 最初の2つの引数 xy 座標はこの四角形の左上隅を指します ですから左から 10px 上から 10px ですね そして幅と高さを 100px にしました 塗り色はデフォルトでは 0 カラー値 0 の黒になります canvasElement から 2D コンテクストを取り出し 四角を描く方法について ご説明しました

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。