HTML5+CSS3绘制锯齿状的矩形


Posted in HTML / CSS onMarch 01, 2016

最近通过敲Html5+Css3,分享一些自己认为值得学习的知识,分享给大家。

如何绘制一个锯齿状的矩形:如图

HTML5+CSS3绘制锯齿状的矩形

我们知道绘制图形可以用canvas ,canvas是HTML5出现的新标签,用于在网页上绘制图形,H5的canvas使用Javascript在网页上绘制图形。
如上锯齿状的矩形,就是用canvas绘制的。

实现代码:

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>     
  2. <html lang="en">     
  3.     <head>     
  4.         <meta charset="UTF-8">     
  5.         <title>锯齿图</title>     
  6.         <script type="text/javascript">     
  7.         window.addEventListener("load", eventWindowLoaded, false);     
  8.         function eventWindowLoaded(){     
  9.             var x,y;     
  10.             var theCanvas = document.getElementById("canvas");     
  11.             var context = theCanvas.getContext("2d");     
  12.             context.strokeStyle = '#CB9A61';      
  13.             context.lineWidth=10;     
  14.             context.strokeRect(10,  10, theCanvas.width-20, theCanvas.height-20);     
  15.             context.fillStyle = "#FFFFFF";     
  16.             for(x=5;x<=canvas.width;xx=x+10){     
  17.                 context.beginPath();     
  18.                 context.arc(x,5,5,0,Math.PI*2,true);     
  19.                 context.arc(x,canvas.height-5,5,0,Math.PI*2,true);     
  20.                 context.closePath();     
  21.                 context.fill();     
  22.             }     
  23.             for(y=5;y<=canvas.height;yy=y+10){     
  24.                 context.beginPath();     
  25.                 context.arc(5,y,5,0,Math.PI*2,true);     
  26.                 context.arc(canvas.width-5,y,5,0,Math.PI*2,true);     
  27.                 context.closePath();     
  28.                 context.fill();     
  29.             }     
  30.         }     
  31.         </script>     
  32.     </head>     
  33. <body>     
  34.     <div style="position: absolute; top: 100px; left: 100px;">     
  35.     <canvas id="canvas" width="400" height="170" top=50pxleft=50px;>     
  36.     </div>     
  37. </body>     
  38. </html>     

如何写如下这样一个形状,一个矩形分成两部分,用斜线隔开,两种颜色。如图:

HTML5+CSS3绘制锯齿状的矩形

起初是这么一个思路,用一个div,中间画个斜线,分成两部分,两种颜色,但是没有实现,由于前台薄弱,能力有限,想到了另外一种方案。

用三个div,左右是两个div,设置宽和高,起重要作用的其实是这一部分:

HTML5+CSS3绘制锯齿状的矩形

其实就是一个矩形,分成两个三角形,最后实现了如上效果。换个思路,实现起来so easy,不能在一棵树上吊死。

代码如下:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>     
  2. <html lang="en">     
  3.      
  4. <body style="margin: 0 0 0 0;">     
  5.     <div id="1" style="background-color:#727171;width:50px;height:20px;float:left" ></div>     
  6.     <div id="2" style="float:left;border-width:10px;border-color:#727171 #9fa0a0 #9fa0a0 #727171;border-style:solid"></div>     
  7.     <div id="3" style="background-color:#9fa0a0;width:50px;height:20px;float:left" ></div>     
  8. </body>     
  9. </html>     

后续继续总结有关HTML和CSS的一些知识,前台的知识看上去简单,其实是个细致活,可以锻炼一个人的耐心。从简单到复杂,从入门到深入,一点点提高自己。

HTML / CSS 相关文章推荐
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 #HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 #HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 #HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 #HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 #HTML / CSS
You might like
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
详解python的变量缓存机制
2021/01/24 Python
得到Class的三个过程是什么
2012/08/10 面试题
生物科学系大学生的自我评价
2013/12/20 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
总结表彰大会主持词
2014/03/26 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
小学三年级作文之写景
2019/11/05 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL