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. DDD 笔记

    1. 简单讲讲DDD,和DDD哪些优势 领域驱动设计.就是通过领域来指导软件设计,是一种十分抽象的软件设计思想,它主要分为战略设计和战术设计 战略方面,通过事件风暴进行领域模型的划分,划分出核心域,子 ...

  2. .NET Core 中生成验证码

    在开发中,有时候生成验证码的场景目前还是存在的,本篇演示不依赖第三方组件,生成随机验证码图片. 先添加验证码接口 public interface ICaptcha { /// <summary ...

  3. Kubernetes容器生命周期 —— 钩子函数详解（postStart、preStop）

    1.概述 容器生命周期钩子(Container Lifecycle Hooks)监听容器生命周期的特定事件,并在事件发生时执行已注册的回调函数. 钩子函数能够感知自身生命周期中的事件,并在相应的时刻到 ...

  4. 使用getevent在Android中调试输入子系统

    # Android getevent用法详解 背景 在调试安卓设备按键,想使用hexdump,但是发现没有找到,反而找到了这个更好用的工具. 以下是我的调试片段 # getevent -l /dev/ ...

  5. 全志A40i＋Logos FPGA开发板（4核ARM Cortex-A7）硬件说明书（上）

    前 言 本文档主要介绍TLA40iF-EVM工业评估板硬件接口资源以及设计注意事项等内容. 核心板的ARM端和FPGA端的IO电平标准一般为3.3V,上拉电源一般不超过3.3V,当外接信号电平与IO电 ...

  6. 写给rust初学者的教程（一）：枚举、特征、实现、模式匹配

    这系列RUST教程一共三篇.这是第一篇,介绍RUST语言的入门概念,主要有enum\trait\impl\match等语言层面的东西. 安装好你的rust开发环境,用cargo创建一个空项目,咱们直接 ...

  7. MinIO使用记录

    探索MinIO:高性能.分布式对象存储解决方案 注:本文除代码外多数为AI生成 最近因为有项目需要换成Amazon S3的云存储,所以把之前做过的minio部分做一个记录,后面也会把基于这版改造的S3 ...

  8. yb课堂 vue里面的状态管理vuex 《四十》

    文档:https://vuex.vuejs.org/zh/ 在store/下index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use ...

  9. LeViT：Facebook提出推理优化的混合ViT主干网络 | ICCV 2021

    论文提出了用于快速图像分类推理的混合神经网络LeVIT,在不同的硬件平台上进行不同的效率衡量标准的测试.总体而言,LeViT在速度/准确性权衡方面明显优于现有的卷积神经网络和ViT,比如在80%的Im ...

  10. [oeasy]python0027_整合程序_延迟输出时间_整合两个py程序

    ​ 整合程序 回忆上次内容 通过搜索发现 time中有函数可以延迟 time.sleep(1) 还可以让程序无限循环 while True: 现在需要两个程序的整合 循环延迟输出 时间输出 ​ 编辑 ...