CANVASのテスト(2011/11/3)

HTML5から新しく加わった機能「Canvas」で絵を描く。

strokeRect()長方形を線描画

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

fillRect()長方形を塗り潰して描画

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

arc()円を描く

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

arc()円を塗りつぶす

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

rgba()透明度を表現

図形を表示するには、canvasタグをサポートしたブラウザが必要です。

ソース

onload = function() { draw1(); draw2(); draw3(); draw4(); draw5(); } /* strokeRect()長方形を線描画 */ function draw1() { // canvas要素のオブジェクトを取得 var canvas = document.getElementById('sample1'); //未対応ブラウザの対処 if ( ! canvas || ! canvas.getContext ) { return false; } // 描画コンテキストを取得 var xvx = canvas.getContext('2d'); // パスをリセット xvx.beginPath(); //線の色を指定する xvx.strokeStyle = 'rgb(255, 80, 255)'; //矩形を描画する xvx.strokeRect(50, 20, 100, 100); } /* fillRect()長方形を塗り潰して描画 */ function draw2() { var canvas = document.getElementById('sample2'); if ( ! canvas || ! canvas.getContext ) { return false; } var xvx = canvas.getContext('2d'); xvx.beginPath(); //塗りつぶしの色を指定する xvx.fillStyle = 'rgb(255, 80, 255)'; // 塗りつぶした矩形を描画する xvx.fillRect(50, 20, 100, 100); } /* arc()円を描く */ function draw3() { var canvas = document.getElementById('sample3'); if ( ! canvas || ! canvas.getContext ) { return false; } var xvx = canvas.getContext('2d'); xvx.beginPath(); xvx.strokeStyle = 'rgb(255, 80, 255)'; //x座標70、y座標70、半径60、開始角度0、終了角度、時計回り xvx.arc(100, 70, 60, 0, Math.PI*2, false); // 描画 xvx.stroke(); } /* arc()円を塗りつぶす */ function draw4() { var canvas = document.getElementById('sample4'); if ( ! canvas || ! canvas.getContext ) { return false; } var xvx = canvas.getContext('2d'); xvx.beginPath(); xvx.fillStyle = 'rgb(255, 80, 255)'; xvx.arc(100, 70, 60, 0, Math.PI*2, false); // 描画 xvx.fill(); } /* rgba()透明度を表現 */ function draw5() { var canvas = document.getElementById("sample5"); if ( ! canvas || ! canvas.getContext ) { return false; } var xvx = canvas.getContext("2d"); xvx.beginPath(); xvx.fillStyle = "rgba(0, 0, 255, 0.2)"; xvx.arc(70, 70, 60, 0, Math.PI*2, true); xvx.fill(); xvx.beginPath(); xvx.fillStyle = "rgba(255, 0, 255, 0.2)"; xvx.arc(130, 70, 60, 0, Math.PI*2, true); xvx.fill(); }
* arc(x座標、y座標、半径、開始角度、終了角度、時計回りfalse/反時計回りture); * rgba(r, g, b, alpha)、r,g,bは0~255、alphaは0~1。
上に戻る