はじめて触ったよ
/* canvaslib.js *//*
* 変数canvasにcanvas要素オブジェクト、
* 変数ctxにキャンバスのグラフィックコンテキスト
* が入っていると仮定する。
*
*/// 指定位置にドット（小さな矩形）を描く
function drawDot(x, y) {
ctx.fillRect(x, y, 4, 4);
}// 2点を結ぶ線を描く
function drawLine(x0, y0, x1, y1) {
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
drawDot(x1, y1);
}// 第一象限内に座標軸に密着した正方形を描く
function drawStdBox(n) {
ctx.fillRect(0, 0, 5, 5);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(n, 0);
ctx.lineTo(n, n);
ctx.lineTo(0, n);
ctx.lineTo(0, 0);
ctx.stroke();
}// キャンバスを完全に再初期化する
function rc() {
canvas.width = canvas.width + 1;
canvas.width = canvas.width - 1;
}// 座標を使いやすいようにセットする
function initCoord() {
ctx.setTransform(1, 0, 0, -1,
Math.round(canvas.width/2),
Math.round(canvas.height/2)
);
}// キャンバスを再初期化し、座標系をセットする
function cc() {
rc();
initCoord();
}// 点の配列に従い、折れ線を描く
function drawPolyline(points) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.lineTo(points[0].x, points[0].y);
ctx.stroke();
}// 点の配列に従い、多角形を塗りつぶす
function fillPolygon(points) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.lineTo(points[0].x, points[0].y);
ctx.fill();
}
<html>
<head>
<title>canvas</title>
<script>
var canvas = null;
var ctx = null;
function initCanvas() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
}
</script>
<style>
#canvas {border: 1px solid blue;
</style>
</head>
<body onload="initCanvas()">
<canvas id="canvas" width="300" height="300" >
<h1>キャンバスがサポートされていません。</h1>
</canvas>
</body>
</html>
