Canvas绘制网格
2023-04-23 本文已影响0人
为什么划船不靠桨
使用Canvas绘制网格的思路
1.设置网格的大小，gridSize用于确定网格之中的线之间的间隔
2.获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数
3.采用遍历的方式，绘画x轴的线条
4.采用遍历的方式，绘画y轴的线条
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
/*
1. 设置网格的大小，gridSize用于确定网格之中的线之间的间隔
2. 获取Canvas的宽度width、高度height，用于计算x轴、y轴需要绘画的条数
3. 采用遍历的方式，绘画x轴的线条
4. 采用遍历的方式，绘画y轴的线条
*/
// 1. 设置网格大小
var girdSize = 10;
// 2. 获取Canvas的width、height
var CanvasWidth = ctx.canvas.width;
var CanvasHeight = ctx.canvas.height;
// 3. 采用遍历的方式，绘画x轴的线条
var xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数
for (var i = 0; i < xLineTotals; i++) {
ctx.beginPath(); // 开启路径，设置不同的样式
ctx.moveTo(0, girdSize * i - 0.5); // -0.5是为了解决像素模糊问题
ctx.lineTo(CanvasWidth, girdSize * i - 0.5);
ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
ctx.stroke();
}
// 4.采用遍历的方式，绘画y轴的线条
var yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数
for (var j = 0; j < yLineTotals; j++) {
ctx.beginPath(); // 开启路径，设置不同的样式
ctx.moveTo(girdSize * j, 0);
ctx.lineTo(girdSize * j, CanvasHeight);
ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示如下：
别人写的很好的 Canvas画圆 的文章和 Canvas API详解。
