欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5+CSS3绘制锯齿状的矩形

程序员文章站 2023-08-17 21:50:54
这篇文章主要教大家如何利用HTML5 CSS3绘制出锯齿状的矩形，绘制图形时可以用canvas标签，感兴趣的小伙伴们可以参考一下... 16-03-01...

最近通过敲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=50px; left=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的一些知识，前台的知识看上去简单，其实是个细致活，可以锻炼一个人的耐心。从简单到复杂，从入门到深入，一点点提高自己。

上一篇： 整理HTML5中表单的常用属性及新属性

下一篇： 吃什么对骨头好，这些你一定要多吃

推荐阅读