頁面
<html>
<body>
<canvas id="canvas" width="800" height="800">
<%--瀏覽器不支持canvas 標籤--%>
</canvas>
</body>
</html>
Js
獲取畫筆
function getCTX() {
let c = document.getElementById("canvas");
let ctx = c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
return ctx;
}
畫點示例
function drawPoint(point) {
let ctx = getCTX();
ctx.fillStyle = "#0000FF";
ctx.fillRect(point.x - 2, point.y - 2, 4, 4);
ctx.font = "16px bold 宋體";
ctx.fillText("(" + point.x + ", " + point.y + ")", point.x, point.y);
}
畫路徑（多條線）示例
function drawPath(path){
ctx.beginPath();
ctx.strokeStyle = "#0000FF";
for(var i = 0; i < path.length - 1; i++){
drawLine(ctx, points[path[i]], points[path[i+1]]);
}
}
function drawLine(ctx, a, b){
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
