グラフを描く
例
y = sin x のグラフです。仕組みはソースを見てください。
canvasとは
canvas要素はHTML 5で描画するための新しい仕組みです。座標は左上隅が原点で，右が x，下が y の向きです。
canvasの使い方
このページの例は次のようにしています。
<head>
...(略)...
<script>
function draw() {
const canvas = document.getElementById('MyCanvas');
const context = canvas.getContext('2d');
context.strokeRect(1, 1, 628, 200);
context.beginPath();
context.moveTo(1, 101);
context.lineTo(629, 101);
context.stroke();
context.beginPath();
context.lineWidth=2;
context.moveTo(1, 101);
for (let i = 4; i <= 628; i += 4) {
context.lineTo(i + 1, 101 - 100 * Math.sin(0.01 * i));
}
context.stroke();
}
</script>
</head>
<body onload="draw()">
...(略)...
<canvas id="MyCanvas" width="630" height="202"></canvas>
...(略)...
</body>
描画の方法
draw() { ... } の中でcanvas要素のcontextを取得し，それに対して実際の描画を行います。
function draw() {
const canvas = document.getElementById('MyCanvas');
const context = canvas.getContext('2d');
// このcontextに対して描画する
}
例えば線分と円を描くには次のようにします。
context.beginPath(); // パスを開始 context.moveTo(20, 190); // ペンを紙に付けずに移動 context.lineTo(580, 10); // ペンを紙に付けて移動 context.stroke(); // パスに沿ってインクを流し込む（デフォルトでは1ピクセル幅） context.beginPath(); context.arc(300, 100, 90, 0, Math.PI * 2, true); // 円 context.strokeStyle = "#6699CC"; context.lineWidth=2; context.stroke();