<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
</body>
<script>
let canvas=document.getElementById("canvas");
canvas.width=800; //画布宽度
canvas.height=800; //画布高度
let context=canvas.getContext("2d")
canvasMonth(context,100,100,400,400,10,"#058","red");
/**
* canvas状态绘制机制 多边形 矩形
* beginPath 表示从这里开始绘制
* closePath 封闭多边形绘制结束方法
* fill 封闭多边形填充开始方法
* @param context 属于谁
* @param moveToX 线条起点 X坐标 类型number
* @param moveToY 线条起点 Y坐标 类型number
* @param lineToX 线条终点 X坐标 类型number
* @param lineToY 线条终点 Y坐标 类型number
* @param lineWidth 线条宽度 类型number
* @param strokeStyle 线条颜色 类型String
* @param fillStyle 封闭图形颜色 类型String
*/
function canvasMonth(context,moveToX,moveToY,lineToX,lineToY,lineWidth,strokeStyle,fillStyle){
context.beginPath(); //清除上一次的绘制参数 开始绘制
context.moveTo(moveToX,moveToY); //线条起点moveToX,moveToY
context.lineTo(moveToX+lineToX,moveToY);
context.lineTo(moveToX+lineToX,moveToY+lineToY);
context.lineTo(moveToX,moveToY+lineToY);
context.closePath();//封闭多边形结束方法
context.lineWidth=lineWidth; //线条宽度
context.fillStyle=fillStyle; //线条颜色
context.strokeStyle=strokeStyle;//多边形填充颜色
context.fill(); //多边形填充
context.stroke(); //结束绘制
}
参考链接
https://www.runoob.com/html/html5-canvas.html
