目录
一、绘制网格
网格效果:
代码:
drawGrid.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制网格</title>
<style>
body {
background: #eee;
}
#canvas {
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
// 获取canvas元素
let canvas = document.getElementById('canvas');
// 获取canvas绘图环境
let context = canvas.getContext('2d');
function drawGrid(stepX, stepY, color, lineWidth){
// 创建垂直格网线路径
for(let i = 0.5 + stepX; i < canvas.width; i += stepX){
context.moveTo(i, 0);
context.lineTo(i, canvas.height);
}
// 创建水平格网线路径
for(let j = 0.5 + stepY; j < canvas.height; j += stepY){
context.moveTo(0, j);
context.lineTo(canvas.width, j);
}
// 设置绘制颜色
context.strokeStyle = color;
// 设置绘制线段的宽度
context.lineWidth = lineWidth;
// 绘制格网
context.stroke();
// 清除路径
context.beginPath();
}
drawGrid(10, 10, 'lightgray', 0.5);
</script>
</body>
</html>
二、绘制坐标轴
坐标轴效果:
‘
代码:
drawAxes.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制坐标轴</title>
<style>
body {
background: #eee;
}
#canvas {
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
// 获取canvas元素
let canvas = document.getElementById('canvas');
// 获取canvas绘图环境
let context = canvas.getContext('2d');
function drawGrid(stepX, stepY, color, lineWidth){
// 创建垂直格网线路径
for(let i = 0.5 + stepX; i < canvas.width; i += stepX){
context.moveTo(i, 0);
context.lineTo(i, canvas.height);
}
// 创建水平格网线路径
for(let j = 0.5 + stepY; j < canvas.height; j += stepY){
context.moveTo(0, j);
context.lineTo(canvas.width, j);
}
// 设置绘制颜色
context.strokeStyle = color;
// 设置绘制线段的宽度
context.lineWidth = lineWidth;
// 绘制格网
context.stroke();
// 清除路径
context.beginPath();
}
drawGrid(10, 10, 'lightgray', 0.5);
function drawAxes(origin, x_Len, y_Len, color, lineWidth){
// 创建水平坐标轴路径
context.moveTo(origin[0], origin[1]);
context.lineTo(origin[0] + x_Len, origin[1]);
// 创建垂直坐标轴路径
context.moveTo(origin[0], origin[1]);
context.lineTo(origin[0], origin[1] - y_Len);
// 创建坐标轴的刻度线路径
for(let i = origin[0] + 30; i < x_Len; i += 30){
context.moveTo(i, origin[1] - 10);
context.lineTo(i, origin[1] + 10);
}
for(let j = origin[1] - 30; j > origin[1] - y_Len; j -= 30){
console.log(j);
context.moveTo(origin[0] - 10, j);
context.lineTo(origin[0] + 10, j);
}
// 设置绘制颜色
context.strokeStyle = color;
// 设置绘制线段的宽度
context.lineWidth = lineWidth;
// 绘制坐标轴
context.stroke();
// 清除路径
context.beginPath();
}
drawAxes([30.5, 330.5], 500, 300, 'blue', 2);
</script>
</body>
</html>
注意:每次调用stroke()方法后一定要记得调用beginPath()方法清除当前存在的路径,否则保留的路径会影响到其他的路径的绘制!