fillStyle

薄々気づいていたんだけど、HTML5になってからJavaScriptって進化した？ htmlページはこんな感じ。 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;script type="text/javascript"&gt; // 四角形を描く function draw() { // canvas要素を取得する var canvas = document.getElementById('draw'); if(!canvas.getContext) { // 取得できなかった場合は終了する return; } // 2D用の描画コンテキストを取得する var context = canvas.getContext('2d'); if(!context) { // 取得できなかった場合は終了する return; } // 桃色に塗りつぶすように色を設定する context.fillStyle = 'rgb(255,155,255)'; // 四角形を描く context.fillRect(10,10,90,90); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="draw()"&gt; &lt;canvas id="draw"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; ポイントはこんな感じだと思う。 &lt;canvas&gt;タグを書いておいて、描画領域設定しておく 以下JavaScriptの記述 fillRect()メソッドを使って図形を描く getElementById()メソッドを使って、canvasタグを取得する getContext()メソッドを使って、描画するためのコンテキストと呼ばれるオブジェクトを取得する fillStyleプロパティを使って、四角を塗りつぶす色を設定する fillRect()メソッドを使って図形を描く で、実行してみるとこんな感じ。 そいや、こういう描画のコーディングって久しくしてないな...Objective-CとかVisual C++のMFCを使ったときくらいか？ まま、メモってことで。

JavaScriptメモ canvasタグを使って四角形を描いてみる