HTML5 Canvas
canvasとは
HTML5の一部で、動的な2次元ビットマップ画像の描画のためのHTMLの要素
HTMLの準備
- canvas要素を記述
InternetExplorerに対応させるため、excanvas.jsを呼び出す- javascriptでcanvasのidを指定
- パス描画を命令する
コード
<script type="text/javascript" src="jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(function(){
//HTMLのDOM要素を選択
var canvas = document.getElementByID('sample');
//図形描画APIを呼び出す
var ctx = canvas.getContext('2d');
var x1 = 0;
var y1 = 0;
var w1 = 200;
var h1 = 200;
//四角形を描く
ctx.strokeRect(0, 0, 200, 200);
// x座標開始点、y座標開始点、x座標長さ、y座標長さ
var x2 = 10;
var y2 = 20;
var w2 = 80;
var h2 = 120;
//四角形を塗りつぶす
ctx.fillRect(10, 20, 80, 120);
});
</script>
<canvas id="sample" width="200" height="200"></canvas>
実例
描画用メソッド
| メソッド | 解説 |
|---|---|
| ctx.beginPath() | 描画パスを開始する |
| ctx.closePath() | 描画パスを終了する |
| ctx.stroke() | 描画パスを描く |
| ctx.fill() | 描画パスを塗りつぶす |
| ctx.moveTo(x, y) | パスを指定座標へ移動する |
| ctx.lineTo(x, y) | 直線パスを描く |
| ctx.arc(x, y, r, startAngle, endAngle, anticlockwise) | 円のパスを描く |
| ctx.strokeRect(x, y, w, h) | 四角形を描く |
| ctx.fillRect(x, y, w, h) | 四角形を塗りつぶす |
| ctx.strokeStyle = "#ffffff" | 線の色を指定 (16進数のRGB指定) |
| ctx.fillStyle = "#ffffff" | 塗りつぶし色を指定 (16進数のRGB指定) |
| ctx.fillStyle = 9 | 線の太さを指定 |
| 引数 | 解説 |
|---|---|
| x | x座標 |
| y | y座標 |
| w | 幅 |
| h | 高さ |
| r | 円の半径 |
| startAngle | 円弧の開始角度 |
| endAngle | 円弧の終了角度 |
| anticlockwise | 円弧描画の向き (true, false) |
2次曲線の不具合
IEでは2次曲線(ベジェ)が上手く描写されない