近期在做一个关于房屋装修的手机上的项目,前台是用H5+C3完毕的,挂在微信上。全部相对来说不是非常难。
这段时间通过敲Html5+Css3。分享一些自己觉得值得学习的知识。
都非常easy。自己操作一遍就会了。前台说简单简单。说难也难。刚開始画的时候。各种调试,各种不熟练。可是自己敲几个demo,完毕几个页面,效率满满就提升了。看着自己画的美美哒界面。心里也是美美哒。
怎样绘制一个锯齿状的矩形:如图
我们知道绘制图形能够用canvas ,canvas是HTML5出现的新标签,用于在网页上绘制图形,H5的canvass使用Javascript在网页上绘制图形。
如上锯齿状的矩形,就是用canvas绘制的。
实现代码:
怎样写例如以下这样一个形状,一个矩形分成两部分,用斜线隔开,两种颜色。如图:锯齿图
起初是这么一个思路,用一个div,中间画个斜线,分成两部分,两种颜色。可是没有实现。因为前台薄弱,能力有限,想到了第二种方案。
用三个div,左右是两个div,设置宽和高,起重要作用的事实上是这一部分:
事实上就是一个矩形。分成两个三角形,最后实现了如上效果。
换个思路,实现起来so easy,不能在一棵树上吊死。
代码例如以下:
兴许继续总结有关HTML和CSS的一些知识,前台的知识看上去简单。事实上是个仔细活。能够锻炼一个人的耐心。从简单到复杂,从入门到深入,一点点提高自己。