HTML5+CSS3繪制鋸齒狀的矩形

2020-03-24 16:42:45

字體：大中小

來源：轉載

供稿：網友

最近通過敲Html5+Css3，分享一些自己認為值得學習的知識，分享給大家。如何繪制一個鋸齒狀的矩形：如圖我們知道繪制圖形可以用canvas ，canvas是HTML5出現的新標簽，用于在網頁上繪制圖形，H5的canvas使用Javascript在網頁上繪制圖形。
如上鋸齒狀的矩形，就是用canvas繪制的。實現代碼：XML/HTML Code復制內容到剪貼板
metacharset= UTF-8 title 鋸齒圖 /title scripttype= text/javascript window.addEventListener( load ,eventWindowLoaded,false); functioneventWindowLoaded(){ varx,y; vartheCanvas=document.getElementById( canvas varcontext=theCanvas.getContext( 2d context.strokeStyle='#CB9A61'; context.lineWidth=10; context.strokeRect(10,10,theCanvas.width-20,theCanvas.height-20); context.fillStyle= #FFFFFF ; for(x=5;x =canvas.width;xx=x+10){ context.beginPath(); context.arc(x,5,5,0,Math.PI*2,true); context.arc(x,canvas.height-5,5,0,Math.PI*2,true); context.closePath(); context.fill(); } for(y=5;y =canvas.height;yy=y+10){ context.beginPath(); context.arc(5,y,5,0,Math.PI*2,true); context.arc(canvas.width-5,y,5,0,Math.PI*2,true); context.closePath(); context.fill(); } } /script /head body div >如何寫如下這樣一個形狀，一個矩形分成兩部分，用斜線隔開，兩種顏色。如圖：起初是這么一個思路，用一個div,中間畫個斜線，分成兩部分，兩種顏色，但是沒有實現，由于前臺薄弱，能力有限，想到了另外一種方案。用三個div,左右是兩個div,設置寬和高，起重要作用的其實是這一部分：其實就是一個矩形，分成兩個三角形，最后實現了如上效果。換個思路，實現起來so easy，不能在一棵樹上吊死。代碼如下：XML/HTML Code復制內容到剪貼板
body >后續繼續總結有關HTML和CSS的一些知識，前臺的知識看上去簡單，其實是個細致活，可以鍛煉一個人的耐心。從簡單到復雜，從入門到深入，一點點提高自己。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：總結HTML-CSS 一些常用的單詞

下一篇：web前端教程之CSS 布局實例