くんくるりんと円をくるくる
完全な円でなく、円弧をも描けるのです。
context.arcTo(x1, y1, x2, y2, radius)
さて、円弧です。
結構これもややこしくて、直前の座標と直線でつながる円弧を作成する際に使用するようで。
開始点から、x1y1を経由してx2y2へ向かう。
で、経由するときに、radius(円の半径)分ぐにゃっと曲がって伸びていく的な感じ。
使い勝手がよう分からん(;´Д`)
var canvas1 = document.getElementById('canvas01'); if (canvas1.getContext) { var context1 = canvas1.getContext('2d'); // 新しいパスを開始する context1.beginPath(); // 100 30の位置に筆を置く context1.moveTo(10,30); // 制御点を150 70にセットし、曲線の終点を200 30に設定する context1.arcTo(130, 150, 220, 70, 80); // 線引いちゃう context1.stroke(); }
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )
円を描きます。
引数は若干アレなので、説明もいれましょう
x
円の中心点のx軸の位置です。
y
円の中心点のy軸の位置です。
radius
円の半径
startAngle
円弧の開始角度
endAngle
円弧の終了角度
anticlockwise
円弧の作成方向
反時計回り(true)
時計回り(false)で指定(初期値はfalse)
var canvas2 = document.getElementById('canvas02'); // なんかねーここでwidth height設定してなかったら楕円になっちゃう canvas2.width = 200; canvas2.height = 200; if (canvas2.getContext) { var context2 = canvas2.getContext('2d'); // 新しいパスを開始する context2.beginPath(); // 角度の設定を別変数でやる(引数に直接指定してもOK) // 角度はラジアンが単位となり、[度数÷180×π]を行う必要がある // JSの場合πに関しては、Math.PIで取得できるのでそれを使用します var startAngle = 0 * Math.PI / 180; var endAngle = 360 * Math.PI / 180; context2.arc(25, 25, 20, startAngle, endAngle, true); // 線引いちゃう context2.stroke(); }
context.rect(x, y, w, h)
四角を描きます。
てめぇさっきやっただろこのやろう
と言いたい所ですが。さっきやったのは、描画まで一気にやるタイプ。
きちんとパスを作成しての方法になります。
やることは一緒なんですけどね
var canvas3 = document.getElementById('canvas03'); canvas3.width = 200; canvas3.height = 200; if (canvas3.getContext) { var context3 = canvas3.getContext('2d'); // 新しいパスを開始する context3.beginPath(); // 四角のパス生成 context3.rect(25, 25, 20, 20); // 線引いちゃう context3.stroke(); }