====== canvasの使い方 ====== ===== canvasの作成 ===== htmlにを記述し、id、横幅(width)、高さ(height)を指定します。 ===== コンテキストの取得 ===== キャンバスの操作は、コンテキストに対して行ないます。 var ctx = document.getElementById("test").getContext("2d") ; ===== 色の指定方法 ===== 色の指定は、cssと同じ16進数での指定、rgbでの指定(0~255)。\\ αを使うならrgbaで指定(透明度のαは0~1.0)。 ctx.fillStyle = "#4080c0" ; ctx.fillStyle = "rgb(64,128,192)" ; ctx.fillStyle = "rgba(64,128,192,0.5)" ; ===== ボックスの塗りつぶし ===== 事前にfillStyleで色を指定しておきます。 ctx.fillRect(始点X,始点Y,横幅,高さ) ; ctx.fillRect(0,0,320,240) ; ===== 多角形の描画 ===== beginPathでパスを開始し、moveToで始点を指定しlineToでパスを繋いで行き、closePathで閉じる。\\ 塗りつぶしはfillで行います。輪郭(パス)の描画ならstrokeを使います。(closePathは省略可能) ctx.beginPath() ; // パスの開始 ctx.moveTo(160,20) ; // ペンを移動 ctx.lineTo(300,220) ; // ラインを引く ctx.lineTo( 20,220) ; ctx.closePath() ; // パスの終了 ctx.fillStyle = "rgba(0,0,255,0.5)" ; // 色指定 ctx.fill() ; // パスを使って塗りつぶし ctx.fillStyle = "#000" ; // 色指定 ctx.lineWidth = 8 ; // 線の太さ ctx.stroke() ; // 輪郭の描画 {{web0000.png}}