<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02Canvas案例-绘制表格</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas=document.querySelector('#cavsElem');
        var ctx=canvas.getContext('2d');
        canvas.width=600;
        canvas.height=600;
        canvas.style.border='1px solid green';
        var rectH=10;
        var rectW=20;
        ctx.lineWidth=.5;
        //绘制表格
        // 第一步： 绘制横线
        for(var i=0;i<canvas.width;i++){
            ctx.moveTo(rectW*i,0);
            //如果不设置moveTo，当前画笔没有位置
            ctx.lineTo(rectW*i,canvas.height);
        }
        //第二步：绘制竖线：如果绘制的格子的宽高相等，可以将for循环放到一个里面；
        for(var i=0;i<canvas.height;i++){
            ctx.moveTo(0,rectH*i);
            ctx.lineTo(canvas.width,rectH*i);
        }
        ctx.stroke();
    }())
</script>
</body>
</html>

使用canvas制作简单表格的更多相关文章

  1. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  2. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  3. [Xcode 实际操作]五、使用表格-(1)使用UITableView制作简单表格

    目录:[Swift]Xcode实际操作 本文将演示表格视图的使用方法. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...

  4. 利用canvas制作简单的logo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 使用canvas制作在线画板

    canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...

  6. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  7. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  8. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  9. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

随机推荐

  1. 可扩展的Web系统和分布式系统（Scalable Web Architecture and Distributed Systems）

    Open source software has become a fundamental building block for some of the biggest websites. And a ...

  2. I/O Completion Ports学习

    表示还是自己看MSDN最直接,别人的介绍都是嚼剩下,有木有? IO完成端口为在多处理器系统处理多个异步IO请求提供一个高效的线程模型.当一个进程新建一个完成端口,操作系统新建一个目的为服务这些请求的队 ...

  3. libev ev_io_init学习

    #define ev_io_init(ev,cb,fd,events) / do { ev_init ((ev), (cb)); ev_io_set ((ev),(fd),(events)); } w ...

  4. ubuntu(14.04) 网路管理

    网络五元素: MAC地址 IP地址 网络掩码 网关 DNS:将ip地址转换成域名 ping ifconfig route /etc/resolv.conf netstat ip nmap cat /e ...

  5. 使用ant优化android项目编译速度，提高工作效率

    1.Android项目编译周期长,编译项目命令取消困难 2.在进行Android项目的编译的同时,Eclipse锁定工作区不能进行修改操作 3.在只进行资源文件的修改时,Eclipse对资源文件的修改 ...

  6. C语言的整型溢出问题

    整型溢出有点老生常谈了,bla, bla, bla… 但似乎没有引起多少人的重视.整型溢出会有可能导致缓冲区溢出,缓冲区溢出会导致各种黑客攻击,比如最近OpenSSL的heartbleed事件,就是一 ...

  7. 【转载】Oracle死锁概念，阻塞产生的原因以及解决方案

    参考原文:http://blog.sina.com.cn/s/blog_9d12d07f0102vu72.html 锁是一种机制,一直存在:死锁是一种错误,尽量避免.​ 首先,要理解锁和死锁的概念:​ ...

  8. Ubuntu 13.04 SSH其他机器连接慢的解决办法

    原来Windows上用Xshell,用这比较爽,命令open http,自动打开自己定义的http服务器SSH 远程连接,点一下文件传输,如果装了xsftp,自动启动xsftp,没有就来个提示,打开一 ...

  9. TF 设置GPU模式训练

    https://blog.csdn.net/confuciust/article/details/78982264 在终端执行程序时指定GPU CUDA_VISIBLE_DEVICES=1 pytho ...

  10. django-TDD

    1.什么是TDD: 测试驱动开发(Test-Driven Development) 它的总体思想是在写“实现”之前先写针对实现的“测试”,由于编写测试的时候 你要思考很多的可能性能,更多的思考也就意味 ...