★html 側
<canvas id="lineTo"></canvas>
★Javascript 側
onload = function() {
// 画面ロード時に描画を実行
draw();
};
function draw() {
// id:lineTo で 2 次元描画を行うことの定義
var c = document.getElementById("lineTo").getContext('2d');
// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:0、y:0 に定義
c.moveTo(0, 0);
// 線を引く座標を x:100、y:10 に定義
c.lineTo(100, 10);
// もひとつ線を引く座標を x:20、y:20 に定義
c.lineTo(20, 20);
// これらの座標に対して線を引く指令
c.stroke();
}
// 画面ロード時に描画を実行
draw();
};
function draw() {
// id:lineTo で 2 次元描画を行うことの定義
var c = document.getElementById("lineTo").getContext('2d');
// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:0、y:0 に定義
c.moveTo(0, 0);
// 線を引く座標を x:100、y:10 に定義
c.lineTo(100, 10);
// もひとつ線を引く座標を x:20、y:20 に定義
c.lineTo(20, 20);
// これらの座標に対して線を引く指令
c.stroke();
}
すると、こうなる。
確認環境:
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53
W3C;
4.8.11 The canvas element — HTML 5
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.