欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5+CSS3繪制鋸齒狀的矩形

  發(fā)布時間：2016-03-01 15:36:36   作者：佚名   我要評論
這篇文章主要教大家如何利用HTML5 CSS3繪制出鋸齒狀的矩形，繪制圖形時可以用canvas標(biāo)簽，感興趣的小伙伴們可以參考一下

最近通過敲Html5+Css3，分享一些自己認(rèn)為值得學(xué)習(xí)的知識，分享給大家。

如何繪制一個鋸齒狀的矩形：如圖

我們知道繪制圖形可以用canvas ，canvas是HTML5出現(xiàn)的新標(biāo)簽，用于在網(wǎng)頁上繪制圖形，H5的canvas使用Javascript在網(wǎng)頁上繪制圖形。
如上鋸齒狀的矩形，就是用canvas繪制的。

實現(xiàn)代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>     

如何寫如下這樣一個形狀，一個矩形分成兩部分，用斜線隔開，兩種顏色。如圖：

起初是這么一個思路，用一個div,中間畫個斜線，分成兩部分，兩種顏色，但是沒有實現(xiàn)，由于前臺薄弱，能力有限，想到了另外一種方案。

用三個div,左右是兩個div,設(shè)置寬和高，起重要作用的其實是這一部分：

其實就是一個矩形，分成兩個三角形，最后實現(xiàn)了如上效果。換個思路，實現(xiàn)起來so easy，不能在一棵樹上吊死。

代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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>     

后續(xù)繼續(xù)總結(jié)有關(guān)HTML和CSS的一些知識，前臺的知識看上去簡單，其實是個細(xì)致活，可以鍛煉一個人的耐心。從簡單到復(fù)雜，從入門到深入，一點點提高自己。

相關(guān)文章

  • 純css3繪制的小黃人頭像動畫特效源碼

    這是一款采用純css3繪制的小黃人頭像動畫特效源碼，畫面中的小黃人手腳、眼睛、嘴以及頭發(fā)都可呈現(xiàn)運動效果。該特效完全采用純css3技術(shù)實現(xiàn)，沒有引入外部圖片資源
    2016-04-06

  • 純css3繪制的QQ企鵝動畫特效源碼

    這是一款采用純css3繪制的QQ企鵝動畫特效源碼，畫面上的企鵝可呈現(xiàn)出雙手上下擺動的效果，該特效采用純css3技術(shù)繪制，沒有引入任何外部圖片
    2016-04-02

  • 純css3繪制的精美購物優(yōu)惠券樣式效果源碼

    這是一款采用純css3繪制的精美購物優(yōu)惠券樣式效果源碼，完全采用css3的徑向漸變功能實現(xiàn)的優(yōu)惠券圖片效果，沒有使用任何外部圖片
    2016-04-01

  • 純css3繪制的哆啦a夢機器貓頭像效果源碼

    這是一款基于純css3繪制的哆啦a夢機器貓頭像效果源碼，沒有采用任何圖片即可繪制出機器貓的頭像效果
    2016-03-17

  • CSS3繪制不規(guī)則圖形的一些方法示例

    這篇文章主要介紹了CSS3繪制不規(guī)則圖形的一些方法示例,包括polygon()的使用等很多實用技巧,需要的朋友可以參考下
    2015-11-07

  • 使用HTML和CSS3繪制基本卡通圖案的示例分享

    這篇文章主要介紹了使用CSS3繪制基本卡通圖案的示例分享,不過必須承認(rèn),這樣做的代碼量并不是很少...well,需要的朋友可以參考下
    2015-11-06

  • CSS3繪制圓角矩形的簡單示例

    這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對CSS3的兼容性,需要的朋友可以參考下
    2015-09-28

  • 使用CSS3來繪制一個月食圖案

    這篇文章主要介紹了使用CSS3來繪制一個月食圖案,其中用到了不少CSS3中基本的繪圖方法,是一個良好的學(xué)習(xí)示例,需要的朋友可以參考下
    2015-07-18

  • 用CSS3繪制三角形的簡單方法

    這篇文章主要介紹了用CSS3繪制三角形的簡單方法,是CSS前端繪圖的基礎(chǔ),需要的朋友可以參考下
    2015-07-17

  • 純CSS3繪制打火機動畫火焰效果

    這篇文章主要為大家詳細(xì)介紹了純CSS3繪制打火機動畫火焰效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-18

最新評論