いろいろな形をいろいろな色で描こう
さらに、線や円、自由曲線などをさまざまな色や透明度を変えながら描いてみます(HTMLはJavaScriptの読み込み先をcanvas_3.jsに変更しただけなので割愛します)。
$(document).ready(function(){ //main_canvas を取得 var canvas = $("#main_canvas"); //2Dの描画コンテキストを取得 var context = canvas[0].getContext("2d"); //線を描く xy(200, 50)とxy(200, 350)に、幅5の黒色の線を引く context.lineWidth = 5; context.strokeStyle = "black"; context.beginPath(); context.moveTo(200, 50); context.lineTo(200, 350); context.stroke(); //三角を描く 縁の幅が4で黒色、塗りつぶしが白色の三角形を描く context.lineWidth = 4; context.strokeStyle = "#000000";//黒 context.fillStyle = "#ffffff";//白 context.beginPath(); context.moveTo(200, 50); context.lineTo(150, 150); context.lineTo(250, 150); context.lineTo(200, 50); context.fill();//塗りつぶし context.stroke();//ストローク //円を描く context.fillStyle = "rgba(0, 0 , 255, 0.8)";//青で、透明度0.8 context.beginPath(); context.arc(200, 200, 50, 50, Math.PI*2,true); context.fill();//塗りつぶし context.stroke();//ストローク //x=150, y=250 の座標に 100x50 のサイズで矩形を描く context.fillStyle = "red"; context.fillRect(150, 250, 100, 50); context.strokeRect(150, 250, 100, 50); });
この例では、コード順に、縦線、白い三角形、半透明な青色の円、赤い矩形を描いています。色はredのようなキーワードの他に#ffffffのような16進トリプレット表記、rgba(0, 0, 255, 0.8)のように指定できます。
文字を描こう
Canvasにも文字列を描くことができます(HTMLはJavaScriptの読み込み先をcanvas_4.jsに変更しただけなので割愛します)。
$(document).ready(function(){ //main_canvas を取得 var canvas = $("#main_canvas"); //2Dの描画コンテキストを取得 var context = canvas[0].getContext("2d"); //中略・・・ //フォントを "32px Arial"にし、白で塗りつぶし青で縁取った文字列を描く context.font = "32px Arial"; context.lineWidth = 1; context.fillStyle = "white"; context.strokeStyle = "blue"; context.fillText("HELLO CANVAS", 72, 100); context.strokeText("HELLO CANVAS", 72, 100); });
文字列は、fillTextおよびstrokeTextの2つのメソッドで描くことができます。fillは塗りつぶしを、strokeは縁のみを描画します。それぞれの色や透明度の指定は、これまでと同様fillStyleおよびstrokeStyleで指定します。フォントはfont属性で指定します。このサンプルでは文字の大きさは20px、フォントはArialと指定しています。
イメージを描こう
また、外部のイメージファイルを読み込んで描画することもできます(HTMLはJavaScriptの読み込み先をcanvas_5.jsに変更しただけなので割愛します)。
$(document).ready(function(){ //main_canvas を取得 var canvas = $("#main_canvas"); //2Dの描画コンテキストを取得 var context = canvas[0].getContext("2d"); //中略・・・ //イメージを読み込んで貼り付け。 var img = new Image(); img.onload = function() { //イメージが読み込まれたら描画する context.drawImage(img, 200, 200); } img.src = 'dino.png'; });
このようにCanvasにはさまざまな形や文字、イメージなどを描くことが可能となっています。ただし、ここで挙げた例は、Canvasでできることの一部に過ぎません。Canvasの使い方をより詳しく知りたい方は、Mozilla Developer Network : Canvasを参照ください。