canvas绘制表格
课程目标：
1.绘制表格需要什么核心方法？ 2.步骤是怎么样的？ 3.源代码
1.绘制表格需要什么核心方法？
Math.floor beginPath moveTo lineTo strokeStyle stroke getContext2.步骤是怎么样的？
let oCanvas = document.querySelector("canvas");第一步：拿到canvas对象
let oCtx = oCanvas.getContext("2d");第二步:通过canvas对象里面的方法拿到绘图工具.
let gridSize = 50;第三步：设置个变量代表单元格的宽高.
let canvasWidth = oCtx.canvas.width;
let canvasHeight = oCtx.canvas.height;第四步：通过绘图工具获取canvas对象里面的宽高。
let row = Math.floor(canvasHeight / gridSize);
let col = Math.floor(canvasWidth / gridSize);第五步：问题是如果单元格的宽高与canvas的宽高除不尽怎么办？ 向下取余.
// 6.绘制垂直方向的横线
for(let i = 0; i < row; i++){
oCtx.beginPath();
oCtx.moveTo(0, i * gridSize - 0.5);
oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
oCtx.strokeStyle = "#ccc";
oCtx.stroke();
}
// 7.绘制水平方向的横线
for(let i = 0; i < col; i++){
oCtx.beginPath();
oCtx.moveTo(i * gridSize - 0.5, 0);
oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
oCtx.strokeStyle = "#ccc";
oCtx.stroke();
}第六步：用for循环绘制表格。 问题？怎么绘制？ 第一步：每一次的循环都开启一个新的路径。根据xy坐标绘制就行了.(默认canvas左上角开始). 为什么-0.5，因为默认情况下线条的中心点和像素的底部对齐所以会2显示，所以显示非纯黑色问题。所以-0.5，代表0.52=1
3.源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
canvas{
display: block;
margin: 0px auto;
background-color: red;
}
</style>
</head>
<body>
<canvas width="500" height="500">
</canvas>
<script>
let q=document.querySelector("canvas");
let w=q.getContext("2d");
let gridSize=50;
//console.log(q.offsetWidth);
//console.log(q.offsetHeight);
//console.log(w.canvas.width);
//console.log(w.canvas.height);
let canvasWidth=w.canvas.width;
let canvasHeight=w.canvas.height;
let row=Math.floor(canvasWidth/gridSize);
let col = Math.floor(canvasWidth / gridSize);
for(let i=0;i<row;i++)
{
w.beginPath();
w.moveTo(0,i*gridSize-0.5);
w.lineTo(canvasWidth,i*gridSize-0.5);
w.strokeStyle="#ccc";
w.stroke();
}
for(let i=0;i<col;i++)
{
w.beginPath();
w.moveTo(i*gridSize-0.5,0);
w.lineTo(i*gridSize-0.5,canvasHeight);
w.strokeStyle="#ccc";
w.stroke();
}
</script>
</body>
</html>
在这里插入图片描述
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录