版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34461514/article/details/79373058
页面
<!--Canvas的宽高要在页面中设置，css或js中设置的宽高不正常-->
<body>
<canvas id="canvas" width="800" height="800">
<%--浏览器不支持canvas 标签--%>
</canvas>
</body>
Js
获取画笔
/**
* 获取画笔
* @return 画笔
*/
function getCTX() {
let c=document.getElementById("canvas");
let ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
return ctx;
}画点示例
/**
* 画点
* @param point 点
*/
function draw_point(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);
}画路径（多条线）示例
/**
* 画路径
* @param path 路径
*/
function draw_path(path){
//开始新路径的绘制
ctx.beginPath();
//设置颜色
//如果颜色需要变更，必须先开始新的路径，否则全部的线颜色由最后一次设置的颜色决定
ctx.strokeStyle="#0000FF";
for(var i=0;i<path.length-1;i++){
draw_line(ctx,points[path[i]],points[path[i+1]]);
}
}
/**
* 画线
*/
function draw_line(ctx,a,b){
ctx.moveTo(a.x,a.y);
ctx.lineTo(b.x,b.y);
ctx.stroke();
}