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绘制表格的更多相关文章

  1. canvas绘制图片

    canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...

  2. 安卓使用Canvas绘制工作日程表

    有一个项目要使用工作表,选择使用canvas来绘制.实现显示工作日程的选择,可点击加入和取消,效果图:http://jwzhangjie.com/workplan.gif 自己定义控件FormView ...

  3. 如何写成高性能的代码（一）：巧用Canvas绘制电子表格

    一.什么是Canvas Canvas是HTML5的标签,是HTML5的一种新特性,又称画板.顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形.圆形等图形或logo等. 需要注意的是,与其他标签 ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  8. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  10. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. 【已结束】阿珏Blog三周年特别纪念活动

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` [已结束]阿珏Blog三周年特别纪念活动 日期:2019- ...

  2. JSON文件存储

    JSON 文件存储 JSON,全称为 JavaScript Object Notation, 也就是 JavaScript 对象标记,通过对象和数组的组合来表示数据,构造简洁但是结构化程度非常高,是一 ...

  3. 【iOS】bugly进阶系列

    初学者使用bugly仅仅是用于接受崩溃日志,但是其实bugly除了接受崩溃之外还可以做许多事情.这里我把bugly分成三大模块逐一进行探讨. (其实bugly顶部的三个标题就预示着bugly的功能本来 ...

  4. AI Agent框架（LLM Agent）：LLM驱动的智能体如何引领行业变革，应用探索与未来展望

    AI Agent框架(LLM Agent):LLM驱动的智能体如何引领行业变革,应用探索与未来展望 1. AI Agent(LLM Agent)介绍 1.1. 术语 Agent:"代理&qu ...

  5. 关于python3多线程和协程

    以下内容部分由chatgpt生成,本文仅作为备忘和记录. asyncio.sleep 和 time.sleep 都是用于在 Python 中进行延迟操作的函数,但它们的工作方式和使用场景有一些不同. ...

  6. PHP 程序员是学 Swoole ？还是学 Go ？

    大家好,我是码农先森. 面临现状 这次为什么要讨论这个话题,因为 Swoole 和 Go 在 PHP 程序员坊间一直都是茶语饭后的谈资,觉得懂 Swoole 和 Go 的就高人一等.相信有很多的 PH ...

  7. Swift开发基础05-可选项

    可选项定义 可选项,一般也叫可选类型,它允许将值设置为nil 在类型名称后面加个问号? 来定义一个可选项 var name: String? = "Jack" name = nil ...

  8. 痞子衡嵌入式：瑞萨RA8系列高性能MCU开发初体验

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是瑞萨RA8系列高性能MCU开发上手体验. 我们知道瑞萨半导体的通用 MCU 产品线主要包含基于自有内核 8/16bit RL78 系列以 ...

  9. EXPLAIN sql优化方法

    select A . id , A . title , B . title from jos_content   A left join jos_categories B on A . catid = ...

  10. Figma 替代品 Excalidraw 安装和使用教程

    如今远程办公盛行,一个好用的在线白板工具对于团队协作至关重要.然而,市面上的大多数白板应用要么功能单一,要么操作复杂,难以满足用户的多样化需求.尤其是在进行头脑风暴.流程设计或产品原型绘制时,我们常常 ...