実際にcanvasタグを使うときは、Javascriptで処理を記載するらしい。
まずはcanvas要素をbodyタグに記載
次にその要素に四角形を描画してみる。
描画するにはcanvasタグからgetContextメソッドで２ｄ要素を指定してオブジェクトを取得する。
そのオブジェクトに対して以下を行うと描画可能。
- begienPath(); で描画開始指定
- lineWidth で線の太さ指定
- strokeStyle で線の色を指定
- moveTo で開始位置に移動
- lineTo で線を描画
- closePath で開始位置にパスをつなげる
- stroke で描画
そのほか
- fillStyle で塗りつぶしの色を指定可能
- fill で塗りつぶし可能
以下ソース。
<!DOCTYPE html> <html> <head> <body> </body>
つづいて円を描画。
描画のステップはほとんど四角形とおんなじ。
違うところは四角形でパスをつなぐところ(4～6)を、円描画の角度を指定して描画するところ。
- 開始角度の指定（ラジアン）
- 終了角度の指定（ラジアン） 2π=360度
- arcで描画(ｘ座標、y座標、半径、開始角度、終了角度、描画が時計まわり=false)
<!DOCTYPE html> <html> <head> <body> </body>
簡単ですねー。楽しいですねー。
ちなみにcanvas描画したものをクリアするにはclearRectを使って以下の用なメソッドをつくればOK。
function drawClear(){
var cvs = document.getElementById("cvs").getContext("2d");
cvs.clearRect(0,0,500,500);
}
0 件のコメント:
コメントを投稿