canvas绘制表格

最新推荐文章于 2024-05-17 11:40:43 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量4.1k

点赞数 4

分类专栏： canvas（打造你的强大基础的文章）

本文链接：https://blog.csdn.net/qq_37805832/article/details/114903520

版权

canvas（打造你的强大基础的文章）专栏收录该内容

7 篇文章 0 订阅

订阅专栏

课程目标：

1.绘制表格需要什么核心方法？
2.步骤是怎么样的？
3.源代码

1.绘制表格需要什么核心方法？

Math.floor  beginPath     moveTo  lineTo  strokeStyle  stroke  getContext

2.步骤是怎么样的？

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>

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas绘制表格

<!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
复制链接

扫一扫