<!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. 10行代码解析krc歌词文件

    互联网上,我们常见的歌词格式有 LRC.TRC(天天动听歌词).KRC(KuGou ResourCe,酷狗资源文件)和 QRC(QQ音乐歌词):在影视制作中,人们通常会用其他的卡拉 OK 字幕格式,例 ...

  2. Spring 3.0 AOP 之 AOP 术语 （一）

    关于AOP.之前我已写过一个系列的随笔: <自己实现简单的AOP>,它的关注点在于实现.实现语言是C#,实现方式为 自定义实现 RealProxy 抽象类.重写Invoke方法,以便进行方 ...

  3. 构建高性能数据库缓存之redis主从复制

    一.什么是redis主从复制? 主从复制,当用户往Master端写入数据时,通过Redis Sync机制将数据文件发送至Slave,Slave也会执行相同的操作确保数据一致:且实现Redis的主从复制 ...

  4. Linux下DIR，dirent,stat等结构体详解（转）

    最近在看Linux下文件操作相关章节,遇到了这么几个结构体,被搞的晕乎乎的,今日有空,仔细研究了一下,受益匪浅. 首先说说DIR这一结构体,以下为DIR结构体的定义: struct __dirstre ...

  5. 进阶之路（基础篇） - 009 通过底层AVR方法实现SPI数据传输

    主机端: /********************************* 代码功能:通过底层AVR方法实现SPI数据传输(主机端) 创作时间:2016*10*17 使用资源: 更低阶的 aTme ...

  6. 【MAVEN】如何在Eclipse中创建MAVEN项目

    目录结构: contents structure [+] 1,Maven简介 2,Maven安装 2.1,下载Maven 2.2,配置环境变量 2.3,测试 3,Maven仓库 3.1,Maven仓库 ...

  7. mysql远程访问，修改root密码

    mysql -uroot -p #input password use mysql; update user set host='%' where user='root'; flush privile ...

  8. 安卓获取ListView、GridView等滚动的距离（高度）

    public int getScrollY() { View c = mListView.getChildAt(0); if (c == null) { return 0; } int firstVi ...

  9. 还没被玩坏的robobrowser(1)-简介

    今天偶然发现了一个很有意思的python库——robobrowser.简单的看了一下,觉得这个东东作为轻量的爬虫还是很适合的.另外这个做一些简单的web测试也未尝不可. 好了,那么问题来了. 什么是r ...

  10. 使用C#WebClient类访问（上传/下载/删除/列出文件目录）

    在使用WebClient类之前,必须先引用System.Net命名空间,文件下载.上传与删除的都是使用异步编程,也可以使用同步编程, 这里以异步编程为例: 1)文件下载: static void Ma ...