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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
python检测lvs real server状态
2014/01/22 Python
详解Python中for循环的使用方法
2015/05/14 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python解惑之整数比较详解
2017/04/24 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
浅析python中的del用法
2020/09/02 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
技术经理的自我评价范文
2013/12/03 职场文书
社区党建工作总结2015
2015/05/13 职场文书
检察院起诉意见书
2015/05/20 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
导游词之丽江普济寺
2019/10/22 职场文书