引入

有时候，你会觉得，为啥我做的网站那么丑，就算排版再漂亮也让人觉得是上个世纪的页面。

或许，你没有一个专业的页面设计师。

当然，我们可以做自己的设计师。

既然设计不出高大上的页面，那就从生活中找经验。

你看，那，程序员的格格衫是多么得和谐～

对，格子是的衬托是最安全的（不然走在路上会被骂衣品丑）。

好了，进入正题。

正题

为了烘托演示效果，我们先写一个简单的文字排版。

如果我们加上一个网格线背景。

瞬间档次提高了有木有？

下面来说一下网格线的实现。

详细步骤

我来用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里查阅。

传送门：https://github.com/827652549/CanvasStudy

无聊中？天天穿格格衫，来为你的网站画个网格线背景吧！小白也能看懂。（Html5 Canvas实现网格线背景）相关推荐

BUI框架中使用Jpush极光推送，单推跟群推，尽量让小白都能看懂
1.先贴一下自己使用的Cordvoa版本 2.再贴一下自己使用的极光推送版本 3.极光推送GitHub地址:点击打开 4.小白常见问题 Crodova打包,编译出错. Crodova打包后,提示JPu ...
web页面中如何隐藏js代码的显示。或者说如何不让别人一下子就能看懂我的web代码。
今天在看别人网页页面的时候,在百度搜索结果中的页面中右键查看源代码,发现百度搜索结果就只有两个代码,如下,没出现其他任何代码 <!DOCTYPE html> <!--STATUS O ...
看门狗(Watch Dog)是嵌入式系统中一种常用的保证系统可靠性的技术，（）会产生看门狗中断。【详细！小白也能看懂！】
看门狗(Watch Dog)是嵌入式系统中一种常用的保证系统可靠性的技术,()会产生看门狗中断. A. 软件喂狗 B. 处理器温度过高 C. 外部中断 D. 看门狗定时器超时解析: 思考方式: 每个 ...
【详解，小白也能看懂】javaweb-Servlet中， OutputStream与PrintWriter的使用和区别
在学javaweb时, 我们会遇到两种输出方式, 一种是OutputStream,一种是PrintWriter, 那么二者有什么区别呢? OutputStream示例: String data = & ...
模拟轮盘抽奖游戏 python_“吃鸡”4位美女在现实中，穿上游戏的“新军需”，这身材绝了...
欢迎诸位小伙伴们来到天哥开讲的<和平精英>"精英那点事儿"~众所周知,这款游戏从公测至今,更新了许多漂亮的衣服和皮肤.我们也经常能看到,一些玩家在现实中穿上游戏里的衣服 ...
书脊开胶了用什么胶粘_鞋子开胶还傻傻用502粘？劝你别做无用功，用这笨招天天穿新鞋...
大部分人换鞋的原因都不是鞋子落伍了,也不是不喜欢穿了,而是鞋子脱胶了.鞋子脱胶后完全没法穿了,几乎70%的人鞋子脱胶后都会选择放弃,转而去挑选一双新鞋.还有的人呢就会想办法把鞋子修好,毕竟花钱买来的鞋 ...
[蓝桥杯python] 无聊的逗：逗志芃在干了很多事情后终于闲下来了，然后就陷入了深深的无聊中。不过他想到了一个游戏来使他更无聊。他拿出n个木棍，然后选出其中一些粘成一根长的，然后再选一些粘成另一个长
[蓝桥杯python] 无聊的逗问题描述 1.资源限制 2.输入格式 3.输出格式 4.样式输入及输出 5.代码及解析大功告成!编写不易,大家成功后点个关注or赞谢谢~~ 问题描述逗志芃在干了很 ...
趣图：谁说理工男都穿格子衫？
(点击上方公众号,可快速关注) 日推上一位推主表示,为了摆脱周围人"你们理科男总是穿格子衬衫"的印象,他们约好,这次大家都不穿格子衫,然后.. ↓↓↓ 汉化:雪糕@程序员的那些事 ...
EXCEL中更改单元格格式后不刷新问题的解决方法
EXCEL中更改单元格格式后不刷新问题的解决方法内容简介:excel文件中有一个日期列,想设为以YYYYMM这样的格式显示,便选择列后,点击格式=>单元格=>数字=>自定义,将格式设 ...

无聊中？天天穿格格衫，来为你的网站画个网格线背景吧！小白也能看懂。（Html5 Canvas实现网格线背景）

引入

正题

详细步骤

代码演示

无聊中？天天穿格格衫，来为你的网站画个网格线背景吧！小白也能看懂。（Html5 Canvas实现网格线背景）相关推荐

最新文章

热门文章