htmlでは、Canvasを用いて図形などの描画を行います。
Canvas設置の流れ
Canvas設置の流れ
- 1Canvasを設定する
- 2CANVASに表示する物（関数）を定義する
- 3関数の場合にロード設定いれる
1.Canvasを設定する
htmlにcanvasタグを設定します。プロパティを設定して表示を変更できます。
<canvas id="sample" style="background-color: silver;" width="400" height="300">2.CANVASに表示する物を定義する
Cnavasに表示するものを記載します。JavaScriptで記載します。
対象とするCanvas要素はsampleになります。
//円をCanvasに描画する関数test
function test() {
var canvas = document.getElementById('sample'); //CANVASを取得
//表示できない場合の処理
if(!canvas.getContext) {
alert("No");
return;
}
if (canvas.getContext) {
var context =canvas.getContext('2d');
// パスをリセット
context.beginPath () ;
//【円形状】
// 円の中心座標: (200,150)
// 半径: 50
// 開始角度: 0度
// 終了角度: 360度 ラジアン
context.arc( 200, 150, 50, 0, 2 * Math.PI, false ) ;
// 塗りつぶしの色
context.fillStyle = "rgba(255,0,0,1.0)" ;
// 塗りつぶしを実行
context.fill() ;
}
}3.関数の場合にロード設定いれる
ページを表示した時、JSの関数を読み込ませるために、bodyタグに関数のロード設定をしておきます。
<body onLoad="test()">
</body>
コメント