用CSS3和Canvas来画网格
我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格。今天来看一下一些不同的方法。
方法一:使用CSS3的background的linear-gradient属性
linear-gradient表示一种线性渐变,指定好开始的坐标,以及线性渐变的参数,就可以实现背景颜色的多变。
先来看效果图:
看html代码:
<div class="grid"></div>
CSS代码:
div,canvas{
width: 400px;
height: 280px;
margin: 10px;
border: 1px solid #000000;
}
.grid{
background: -webkit-linear-gradient(top,transparent 39px,blue 39px,blue 41px,transparent 41px,transparent 79px,red 80px),
-webkit-linear-gradient(left,transparent 39px,yellow 39px,yellow 41px,transparent 41px,transparent 79px,green);
background-size: 81px 81px;
}
非常简单,如果仔细看,你就能看出它的使用规律。这里要注意,我使用的是chrome浏览器,如果在兼容多种浏览器,需要在linear-gradient加上相对应的前缀,比如IE:-ms-linear-gradient,firefox:-moz-linear-gradient,opera:-o-linear-gradient。
另外,我们注意到,虽然在CSS代码中,我们是先写横线的样式,再写竖线的样式的,但是,当纵向的线和横向的线相交时,在相交部分,横向的线是在纵向的线之上的。反之,则纵向的线会在横向的线之上。(什么原因暂时还不清楚)。
现在我们用canvas的方法实现一遍,效果如上图所示。
html代码:
<canvas></canvas>
JS代码:
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 400;
canvas.height = 280;
if(canvas.getContext){
var ctx = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
ctx.lineWidth = 2;
//先画横线
for( var i = 1; i * 40 < height; i++ ){
ctx.strokeStyle = i % 2 ? 'blue' : 'red';
ctx.beginPath();
ctx.moveTo(0,i * 40);
ctx.lineTo(width,i* 40);
ctx.stroke();
}
//再画纵线
for( var j = 1; j * 40 < width; j++ ){
ctx.strokeStyle = j % 2 ? 'yellow' : 'green';
ctx.beginPath();
ctx.moveTo(j * 40, 0);
ctx.lineTo(j * 40, height);
ctx.stroke();
} }
在JS代码中,我们通过画简单的直线来实现了这个效果,但是注意,这里的效果暂时还和预期的有点出入:
横线和纵线相交时,纵线在上,这是因为我们在代码中,先画横线,再画纵线,所以很自然就会有这样的效果。
如果我们要达到预期的效果,有两种解决方案:
方案一:将画线的两个for循环的顺序调转过来,变成先画竖线,再画横线,则可以达到预期的效果。
方案二:使用 ctx.globalCompositeOperation属性,具体的做法:在原来的代码中,在画横线的for循环之前,加上一句:
ctx.globalCompositeOperation = 'destination-over';
它表示,当线与线之间出现重叠时,重叠部分采用后来画的线的样式。
具体ctx.globalCompositeOperation的用法可以参考 这个
参考资料:使用CSS3绘制网格线
<- 本文完 ->
用CSS3和Canvas来画网格的更多相关文章
- css3简单几步画一个乾坤图
原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...
- 使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
- WinForm画网格并填充颜色
因为研究CodeCombat上的最后一题,自己尝试分解题目,然后想到需要画网格,还有最优化的方法 源代码如下 using System; using System.Collections.Generi ...
- 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线
众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...
- (转)第02节:在Canvas上画简单的图形
我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...
- Canvas 如何画一个四分之一圆
转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...
- 用css3和canvas实现的蜂窝动画效果
近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...
- [原创]css3简单几步画一个乾坤图
效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;bo ...
- canvas案例——画时钟
基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...
随机推荐
- REM 布局
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
- MFC工程资源相对路径
Project->Properties->Configuration Properties->Debuging->Working Directory改为$(ProjectDir ...
- FusionChart 数据的传入方式
已有案例,懒得写了,放个链接,大家看看吧.http://www.cnblogs.com/liujian21st/archive/2013/03/22/2975124.html
- Android下OpenCV的环境搭建
目录(?)[-] 前言 系统环境 相关工具 Android ADT环境搭建 Android SDK环境变量的配置 Android NDK的安装与配置 OpenCV for Android 环境搭建 基 ...
- 验证控件,解决用于ajax提交前的验证,不是submit提交的验证
//解决ajax提交前的验证问题,主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证.(function ($) { var v; //Create a n ...
- ebox学习之SD & fat 配置
fatfs可配置项很多,相关的配置均在ffconfig.h文件中 /*----------------------------------------------------------------- ...
- UI,切图,命名
APP切图流程和APP切图命名规范详细完整版 http://www.25xt.com/appdesign/7339.html Marketch
- nginx,控浏览器缓存,前端优化方案
1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...
- php 读取json数据文本所遇到的问题
json数据属于特殊的字符串,一般自己写的json数据不要误加空格,回车,换行, 若是从其他文件读取过来的json数据很有可能带有空格,回车,换行等符号,导致使用json_decode()转诚数组失败 ...
- java代码优化
优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率. 1.尽量指定类的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java ...