文章地址 https://www.cnblogs.com/sandraryan/

两个循环绘制

<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();

效果同上

h5的canvas绘制方格（边框随即色）的更多相关文章

  1. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. h5 的canvas绘制基本图形

    文章地址:https://www.cnblogs.com/sandraryan/ canvas是一个标签,可用于绘制复杂图形,渲染效果比普通DOM快 某些低版本浏览器不支持 canvas 使用原生几乎 ...

  3. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  4. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

  5. 教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像

    昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣. 1.canvas 这就不得不提到小程序中的 API canvas,H5 中也是有 canva ...

  6. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  7. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

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

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

  9. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

随机推荐

  1. java如何访问memcache

    1       Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的 ...

  2. DataGrid无故多一行空白行

    DataGrid绑定datatable时, Datagrid.Itemsource=dt.DefaultView: 发现DataGRID会多处一行 解决如下: 对Datagrid的CanUserAdd ...

  3. python-null

    很早之前,遇到过一个面试官问的python中有没有null,当时有点紧张,想成了None,就脱口而出是有的.今天遇到了none问题,所以就正好说一下. python中是没有NULL的. Python中 ...

  4. 第三十一讲：UML类图（上）

    类名 成员变量:属性 成员函数:方法 访问权限-属性名-属性的类型 访问权限-方法名-返回值,还可以传递参数列表. 继承类的类图 JAVA里面类的访问权限只有两种:package(默认的访问权限)和p ...

  5. Leetcode925.Long Pressed Name长按键入

    你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的名字(其中一 ...

  6. Leetcode696.Count Binary Substrings计算二进制字串

    给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的. 重复出现的子串要计算它们出现的次数. 示例 1 : 输入: "0 ...

  7. 【水滴石穿】bstmy-blend-app

    这个项目是一个简单的底部导航切换页面 项目的地址为:https://github.com/Bstmy/bstmy-blend-app 先看效果 点击首页是首页面,点击个人中心是个人中心页面 先看代码 ...

  8. The 16th UESTC Programming Contest Final 游记

    心情不好来写博客. 为了满足ykk想要气球的愿望,NicoDafaGood.Achen和我成功去神大耍了一圈. 因为队名一开始是LargeDumpling应援会,然后队名被和谐,变成了学校的名字,顿时 ...

  9. 值得研究的J2EE开源项目推荐

    导读:笔者在学习J2EE的过程中发现了一些很有用,而且很值得学习的开源项目,在此推荐给大家. 关键词:J2EE 开源项目 J2SE JBoss SOA EJB   这篇文章写在我研究J2SE.J2EE ...

  10. 【python小随笔】进程池 multiprocessing.Pool的简单实现与踩过的坑

    #导入进程模块 import multiprocessing #创建进程池 坑:一定要在循环外面创建进程池,不然会一直创建 pool = multiprocessing.Pool(30) for Si ...