百度T7 课程 canvas 学习 2-网格
程序员文章站
2022-05-21 13:49:35
...
这个世界的水很深， 特别是人情世故，特别深，
越了解，越发的知道自己啥都不懂，也不会！
好吧，我们继续我们的canvas 大业
1.网格1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格</title>
<style>
#c1{
border:1px solid black;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.getElementById('c1')
var gd = oCanvas.getContext('2d')
// 你要画一个表格：
// 你得思考，每个格子多大！
var space = 20
// 1, 得到 画布的宽和高
var cWidth = gd.canvas.width;
var cHeight = gd.canvas.height;
// 当你记不住api 的时候，就打印出来看看！
var lines = Math.floor(cHeight/space)
for(let i = 0;i<lines;i++){
gd.beginPath()
gd.moveTo(0,space*i)
gd.lineTo(cWidth,space*i)
gd.strokeStyle='#aaa'
gd.stroke();
}
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>
表现：
网格2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格</title>
<style>
#c1{
border:1px solid black;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.getElementById('c1')
var gd = oCanvas.getContext('2d')
// 你要画一个表格：
// 你得思考，每个格子多大！
var space = 20
// 1, 得到 画布的宽和高
var cWidth = gd.canvas.width;
var cHeight = gd.canvas.height;
// 当你记不住api 的时候，就打印出来看看！
var lines = Math.floor(cHeight/space)
var cols = Math.floor(cWidth/space)
for(let i = 0;i<lines;i++){
gd.beginPath()
gd.moveTo(0,space*i-0.5)
gd.lineTo(cWidth,space*i-0.5)
gd.strokeStyle='#aaa'
gd.stroke();
}
// 画第二个竖着的格子！
for(let j = 0; j<cols;j++){
gd.beginPath();
gd.moveTo(space*j-0.5,0)
gd.lineTo(space*j-0.5,cHeight)
gd.strokeStyle="#aaa"
gd.stroke()
}
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>显示
总结： 画网格很简单，就是画线，遍历划线就行了！
关键是每个格子多大?
要画多少条线?
每条线的位置在哪？
至于实现，就简单了，基本上这个还是so easy 的！
还有就是简化思维， 比如， 100 宽，每个格子20 要画几条线
答案是6条， 为啥，你画个图一看就知道了， 这就是简化思维
本例子中最后一条是边框，可以不画：
最后，强调， 读懂一个程序分三步，
流程，
每个语句的功能
最后是试数！
这样无论你学算法，还是读源码都没多大问题！