h5的canvas绘制方格
时间:2019-09-24
本文章向大家介绍h5的canvas绘制方格,主要包括h5的canvas绘制方格使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
两个循环绘制
<body> <canvas id="cv" width="800" height="500"></canvas> <script> var cv = document.querySelector('#cv'); var ctx = cv.getContext('2d'); ctx.beginPath(); // 绘制水平线,起始点x坐标都为0,结束点x坐标都为宽度 // y坐标从50开始,每次累加50 ctx.lineWidth = .2; for(var i = 1; i < 500/50; i++){ ctx.moveTo(0,i*50); ctx.lineTo(800,i*50); } ctx.stroke(); // 竖直方向,起始点y坐标都是0,终止点y都是高度,累加50 ctx.beginPath(); for(var j = 0; j < 800/50; j++){ ctx.moveTo(50*j,0); ctx.lineTo(50*j,500); } ctx.stroke(); </script> </body>
效果图
代码优化:
var cv = document.querySelector('#cv'); var ctx = cv.getContext('2d'); ctx.beginPath(); for(var i = 0; i < 800/50; i++){ // 竖直线 ctx.moveTo(50*i,0); ctx.lineTo(50*i,500); // 水平线 // 如果水平线绘制完毕,就没必要继续嗲用moveTo 和lineTo if(i> 500/50){ continue; } ctx.moveTo(0,i*50); ctx.lineTo(800,i*50); } ctx.stroke();
效果同上
原文地址:https://www.cnblogs.com/sandraryan/p/11577399.html
- Hadoop数据分析平台实战——080HBase介绍和安装离线数据分析平台实战——080HBase介绍和安装
- Hadoop数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)离线数据分析平台实战——130Hive Shell命令介绍 02(熟悉Hive略过)
- ECJTUACM16 Winter vacation training #4 题解&源码
- Hadoop数据分析平台实战——090HBase shell客户端和Java Api介绍离线数据分析平台实战——090HBase shell客户端和Java Api介绍
- Hadoop数据分析平台实战——140Hive函数以及自定义函数讲解离线数据分析平台实战——140Hive函数以及自定义函数讲解
- 深入理解树状数组
- Codeforces 712C Memory and De-Evolution
- Codeforces 712B Memory and Trident
- Hadoop数据分析平台实战——110Hive介绍和Hive环境搭建离线数据分析平台实战——110Hive介绍和Hive环境搭建
- 干货|普通反爬虫机制的应对策略
- python基础-字符串与编码
- Codeforces 708A Letters Cyclic Shift
- Codeforce 712A Memory and Crow
- 每日一水之strcmp用法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [Oracle 故障处理]记一次Windows监听启动失败
- Python 基础(二十一):argparse 模块
- LeetCode 4 题解
- 操作系统与 CPU 是怎么执行线程的?
- LeetCode 5 题解
- 详细齐全!Docker常用基本命令
- angular浏览器兼容性问题解决方案
- Python 基础(二十二):正则表达式
- Python 进阶(一):多线程
- Python 进阶(二):多进程
- MySQL information_schema详解 EVENTS
- Python 进阶(三):邮件的发送与收取
- MySQL information_schema详解 FILES
- MySQL information_schema详解 GLOBAL_STATUS和SESSION_STATUS
- Python 进阶(四):数据库操作之 MySQL