＜sample＞四角を描く
【index.html】
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>Canvasの練習</title>
</head>
<body>
<h1>Canvasの練習</h1>
<canvas id=”mycanvas” width=”400″ height=”200″>
Canvasに対応したブラウザを使ってください。
</canvas>
<script src=”myscript.js”></script>
</body>
</html>
【myscript.js】
// myscript.js
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById(‘mycanvas’);
if (!canvas || !canvas.getContext) return false;
var ctx = canvas.getContext(‘2d’);
ctx.strokeRect(10,10,50,50);
}
◇お絵かきの準備
//canvasオブジェクトを呼び出して var cvs = document.getElementById("canvasobj"); //対応外ブラウザを拒否して if (!cvs.getContext) return false; //2dコンテキストを呼び出し var ctx = cvs.getContext('2d');
◇実質に円を描く
//パスを書き始めますよ宣言 ctx.beginPath(); //円を描くメソッド。arc(x, y, 半径, 円の始点, 円の終点, 回転方向) ctx.arc(point_x,point_y,point_r,0,0,true); //塗りつぶしメソッド ctx.fill(); //塗りつぶし色プロパティ ctx.fillStyle = getRandColor(); //透明度 ctx.globalAlpha = point_a;
◇色を指定する
Canvasでは、描く図形の色は、デフォルトでは黒となります。
ctx.strokeStyle = color 図形の枠線の色を指定します。
ctx.fillStyle = color 図形を塗りつぶす色を指定します。
※colorに指定する色はCSSで指定するフォーマットに対応しています。
◇半透明度を指定する
◎rgbaフォーマットによる色指定
ctx.fillStyle = ‘rgba(128, 100, 162, 0.7)’; // 紫で半透明度0.7
◎globalAlphaプロパティ
ctx.globalAlpha = 0.7; // 半透明度0.7
