08-canvas绘制表格
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绘制表格的更多相关文章
- canvas绘制图片
canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...
- 安卓使用Canvas绘制工作日程表
有一个项目要使用工作表,选择使用canvas来绘制.实现显示工作日程的选择,可点击加入和取消,效果图:http://jwzhangjie.com/workplan.gif 自己定义控件FormView ...
- 如何写成高性能的代码（一）：巧用Canvas绘制电子表格
一.什么是Canvas Canvas是HTML5的标签,是HTML5的一种新特性,又称画板.顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形.圆形等图形或logo等. 需要注意的是,与其他标签 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
随机推荐
- Jenkins构建UI自动化项目，指定本地执行，没弹起浏览显示
1. 原因分析 为什么执行web没有弹出浏览器,Jenkins日志显示正在执行中 jenkins是用windows installer 安装成 windows的服务了,那么启动windows后jenk ...
- 玉炜的iOS开发规范(12.14更新)
苹果账号篇 1.新建一个新项目之后的bundle ID无论是否定没定,上架的账号如果没定,最好先写一个绝对用不上的名字,因为这个bundle ID一经确定会被绑定在当前你的苹果账号上,如果正好绑定的是 ...
- Spark内核架构核心组件.txt
1.Application2.spark-submit3.Driver4.SparkContext5.Master6.Worker7.Executor8.Job9.DAGScheduler10.Tas ...
- 【ClickHouse】5：clickhouse集群部署
背景介绍: 有三台CentOS7服务器安装了ClickHouse HostName IP 安装程序 程序端口 centf8118.sharding1.db 192.168.81.18 clickhou ...
- rgba和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度, 而rgba()只作用于元素的颜色或其背景色.(设置rgba透明的元素的子元素不会继 ...
- yb课堂 新版VueCli 4.3创建vue项目，Vue基础语法入门 《二十九》
Vue模版语法开发起步 基于HTML的模版语法,允许声明式地将DOM绑定至底层Vue实例的数据 用简洁的模版语法来声明式的将数据渲染进DOM的系统 结合响应系统,在应用状态改变时,Vue能够智能地计算 ...
- SpringBoot中使用Servlet3.0注解开发自定义的拦截器
使用Servlet3.0的注解进行配置步骤 启动类里面加@ServletComponentScan,进行扫描 新建一个Filter类,implements Filter,并实现对应的接口 @WebFi ...
- 网易数帆实时数据湖 Arctic 的探索和实践
作者 | 蔡芳芳 采访嘉宾 | 马进 网易数帆平台开发专家 数据中台也要从离线为主走向实时化,湖仓一体是第一步. 数据从离线到实时是当前一个很大的趋势,但要建设实时数据.应用实时数据还面临两个难题.首 ...
- leetcode简单(数组,字符串,链表)：[168, 171, 190, 205, 228, 448, 461, 876, 836, 844]
目录 168. Excel表列名称 171. Excel 表列序号 190. 颠倒二进制位 205. 同构字符串 228. 汇总区间 448. 找到所有数组中消失的数字 461. 汉明距离 876. ...
- BigDecimal的精度与刻度
BigDecimal是Java中用于高精度算术运算的类.当您需要精确地处理非常大或非常小的数字时,例如在金融计算中,它特别有用.由于众所周知得原因,Double这种类型在某些情况下会出现丢失精度的问题 ...