HTML5Canvas鋸齒圖代碼怎么寫-創(chuàng)新互聯(lián)

這篇文章給大家介紹HTML5 Canvas鋸齒圖代碼怎么寫，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

專注于為中小企業(yè)提供做網站、網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)察哈爾右翼前免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

效果圖：HTML5 Canvas鋸齒圖代碼怎么寫

提示：把代碼復制到一個html文件中并保存，直接打開即可看到效果。

實現(xiàn)代碼：



代碼如下:

<!doctype html>
 <html lang="zh">
 <head>
 <meta charset="gbk">
 <title>鋸齒圖</title>
 <script type="text/javascript">
 window.addEventListener("load", eventWindowLoaded, false);
 function eventWindowLoaded(){
 var x,y;
 var theCanvas = document.getElementById("canvas");
 var context = theCanvas.getContext("2d");
 
 //Box
 context.strokeStyle = '#00f';
 context.lineWidth=10;
 context.strokeRect(0,  0, theCanvas.width-0, theCanvas.height-0);
 context.fillStyle = "#00f";
 for(x=5;x<=canvas.width;x=x+10){
 context.beginPath();
 context.arc(x,5,5,0,Math.PI,false);
 context.closePath();
 context.fill();
 context.beginPath();
 context.arc(x,canvas.height-5,5,0,Math.PI,true);
 context.closePath();
 context.fill();
 }
 for(y=5;y<=canvas.height;y=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 >
 <canvas id="canvas" width="300" height="300">
 </div>
 </body>
 </html>

關于HTML5 Canvas鋸齒圖代碼怎么寫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站題目：HTML5Canvas鋸齒圖代碼怎么寫-創(chuàng)新互聯(lián)
當前網址：http://bm7419.com/article24/dihpce.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站營銷、做網站、網站收錄、企業(yè)建站、品牌網站設計、網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站制作