引入
有时候,你会觉得,为啥我做的网站那么丑,就算排版再漂亮也让人觉得是上个世纪的页面。
或许,你没有一个专业的页面设计师。
当然,我们可以做自己的设计师。
既然设计不出高大上的页面,那就从生活中找经验。
你看,那,程序员的格格衫是多么得和谐~
对,格子是的衬托是最安全的(不然走在路上会被骂衣品丑)。
好了,进入正题。
正题
为了烘托演示效果, 我们先写一个简单的文字排版。
如果我们加上一个网格线背景 。
瞬间档次提高了有木有?
下面来说一下网格线的实现。
详细步骤
我来用canvas进行实现,这里我假设你是Canvas小白,所以我给你往详细了说。
画网格线:通过Canvas,进行线段绘画,计算每条线的位置和长度,然后绘制即可。
设置绝对布局:为了让网格线背景不影响我们的主元素,我们设成绝对布局就不用为它操心了。
窗口缩放监听:因为Canvas画出来的是静态的图像,所以对窗口设置缩放监听并更新背景,以免缩放产生不美观的现象。
先来看一下网格的实现代码:
//获取canvas元素
var canvas = document.getElementById('canvas'),
//获取绘图环境
context = canvas.getContext('2d');
/**
* 画网格
* @param color 网格线颜色
* @param stepX 格子横向间距
* @param stepY 格子垂直间距
*/
function drawGrid(color, stepX, stepY) {
context.save();
context.strokeStyle = color;
context.lineWidth = 0.5;
for (var i = stepX + 0.5;
i < context.canvas.width; i += stepX) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepY + 0.5;
i < context.canvas.height; i += stepY) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
context.restore();
}
drawGrid(color,stepX,stepY);我们通过这三个参数,自定义网格线的颜色,水平间距,垂直间距。
这里我们首先获取到canvas标签元素,然后通过Canvas的API方法canvas.getContext('2d');获取绘图环境,所有对Canvas进行绘图操作的方法都在绘图环境中。
首先忽略save()方法,我们通过strokeStyle设置网格线颜色,通过lineWith设置网格线宽度,通过stepX设置网格水平间距,stepY设置垂直间距;循环中的的beginPath()为了绘图初始化用的,如果你是小白,不在意也无妨。然后是moveTo()和lineTo()是画线的起止点,然后根据页面宽度一条一条画线,直到画出整个网格。
drawGrid()方法内开头的save()和末尾的restore()是“备份样式”和“恢复样式”的方法,这是Canvas编码的需要,详细原因自行搜索,这里不必过多探究。
代码演示
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。