JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實例
更新時間:2016年01月26日 12:49:23 作者:m1870164
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JavaScript+html5 canvas繪制繽紛多彩的三角形效果。分享給大家供大家參考,具體如下:
運行效果截圖如下:
具體代碼如下:
<!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; height:500px; border:3px solid #F2F2F2; box-shadow:0px 0px 25px #494949; margin:0 auto; margin-left:200px; margin-top:50px; } </style> </head> <body> <canvas id="canvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var colorArray = "01234567890ABCDEFabcdef".split(""); var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); function createTriangle(startPos, r, color) { var startX = startPos.x, startY = startPos.y; ctx.save(); ctx.strokeStyle = color || "black"; ctx.beginPath(); ctx.lineWidth=2; ctx.moveTo(startX, startY); ctx.lineTo(startX+r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6)); ctx.lineTo(startX-r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6)); ctx.lineTo(startX, startY); ctx.closePath(); ctx.stroke(); ctx.restore(); } function createColor() { var color = "#"; for(var i=0; i<6; i++) { color += colorArray[Math.floor(Math.random()*colorArray.length)]; } return color; } for(var i=0; i<100; i++) { var x = Math.round(Math.random()*500), y = Math.round(Math.random()*500), color = createColor(); console.log(color); createTriangle({x: x, y: y}, 50, color); } </script> </body> </html>
更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- JS Canvas定時器模擬動態(tài)加載動畫
- JS基于HTML5的canvas標簽實現(xiàn)炫目的色相球動畫效果實例
- js canvas實現(xiàn)擦除動畫
- JavaScript+html5 canvas實現(xiàn)圖片破碎重組動畫特效
- javascript+HTML5的Canvas實現(xiàn)Lab單車動畫效果
- js+canvas繪制五角星的方法
- js+canvas簡單繪制圓圈的方法
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎
- js+canvas繪制矩形的方法
- JS+Canvas繪制時鐘效果
- JavaScript+html5 canvas繪制漸變區(qū)域完整實例
- JS+canvas繪制的動態(tài)機械表動畫效果
相關(guān)文章
利用javascript實現(xiàn)一些常用軟件的下載導航
利用javascript實現(xiàn)一些常用軟件的下載導航,非常不錯的應用,思路值得借鑒,沒看過的朋友可以看下。2009-08-08js+CSS實現(xiàn)彈出居中背景半透明div層的方法
這篇文章主要介紹了js+CSS實現(xiàn)彈出居中背景半透明div層的方法,涉及javascript操作彈出div層的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02JS插件clipboard.js實現(xiàn)一鍵復制粘貼功能
這篇文章主要介紹了JS插件clipboard.js實現(xiàn)一鍵復制粘貼功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08