码迷,mamicode.com
首页 > 其他好文 > 详细

08-canvas绘制表格

时间:2020-01-08 14:48:17      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:width   type   pat   setw   line   水平   selector   canvas   offset   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>08-Canvas绘制表格</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             display: block;
13             margin: 0 auto;
14             background: red;
15         }
16     </style>
17 </head>
18 <body>
19 <canvas width="500" height="400"></canvas>
20 <script>
21     // 1.拿到canvas
22     let oCanvas = document.querySelector("canvas");
23     // 2.从canvas中拿到绘图工具
24     let oCtx = oCanvas.getContext("2d");
25     // 3.定义变量保存小方格的尺寸
26     let gridSize = 50;
27     // console.log(oCanvas.offsetWidth);
28     // console.log(oCanvas.offsetHeight);
29     // console.log(oCanvas.clientWidth)
30     // console.log(oCanvas.clientHeight);
31     // console.log(oCanvas.scrollHeight);
32     // console.log(oCtx.canvas.width);
33     // console.log(oCtx.canvas.height);
34     // 4.拿到canvas的宽高
35     let canvasWidth = oCtx.canvas.width;
36     let canvasHeight = oCtx.canvas.height;
37     // 5.计算在垂直方向和水平方向可以绘制多少条横线
38     let row = Math.floor(canvasHeight / gridSize);
39     let col = Math.floor(canvasWidth / gridSize);
40     // 6.绘制垂直方向的横线
41     for(let i = 0; i < row; i++){
42         oCtx.beginPath();
43         oCtx.moveTo(0, i * gridSize - 0.5);
44         oCtx.lineTo(canvasWidth, i * gridSize - 0.5);
45         oCtx.strokeStyle = "#ccc";
46         oCtx.stroke();
47     }
48     // 7.绘制水平方向的横线
49     for(let i = 0; i < col; i++){
50         oCtx.beginPath();
51         oCtx.moveTo(i * gridSize - 0.5, 0);
52         oCtx.lineTo(i * gridSize - 0.5, canvasHeight);
53         oCtx.strokeStyle = "#ccc";
54         oCtx.stroke();
55     }
56 </script>
57 </body>
58 </html>

08-canvas绘制表格

标签:width   type   pat   setw   line   水平   selector   canvas   offset   

原文地址:https://www.cnblogs.com/gsq1998/p/12166060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!