这个题目不是很正确，但是它和我的初衷是一样的。最近项目快要结尾了，然后组长就开始完善各种找问题，我就是那首批炮灰，“你的登录、注册页面丑出天际，看看人家的背景图！”
这锅我岂能乖乖受着，哼，我也加过背景图是你说不好看让我删了的，哼，当然这些都只能心里默默念着，可不敢顶嘴。
“人家的背景图还是动图呢，你服不服！”
“我服，我服，不就是动态的么，等会我也把背景图加成 gif 格式，嘻嘻。”
好了，这次组长一口气没有蒙上来，乖乖闭嘴了。
上面是背景故事，下面才是干货，想到动态图，首先我就想到了上学期接触的 canvas ，然后上网搜了一下，果然可以实现，好不容易写好了绚酷的动态图，结果发现我的登录注册只能才下面显示，举栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="200" height="200" style="border: solid ">
</canvas>
<div>登录</div>
</body>
</html>
login.png
我想要的可不是这样，是让登录两个字显示在 canvas 的画布里面，我尝试把它写在里面：
<canvas width="200" height="200" style="border: solid ">
<div>登录</div>
</canvas>
login.png
你说气不气人，什么都没了，安静下来仔细想想，其实 canvas 也没有错，人家本来就是一块画布，肯定把其它的给覆盖了，搜了一下发现，这个时候只有一个办法——以暴治暴，用 position 的绝对定位强行把它放在里面，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="200" height="200" style="border: solid ">
</canvas>
<div style="position: absolute;left: 80px; top: 80px">登录</div>
</body>
</html>
login.png
这样就实现了 canvas 只是你的背景，这里推荐知乎的登录界面实现的很完美。（嘘！其实我也实现了那样的呢）
网友评论