• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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>     

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

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

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

    其实就是一个矩形,分成两个三角形,最后实现了如上效果。换个思路,实现起来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中的contentEditable来将多行文本自动增高
    下一篇:逼真的HTML5树叶飘落动画
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5+CSS3绘制锯齿状的矩形 HTML5+CSS3,绘制,锯齿状,的,