JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實(shí)例
更新時(shí)間：2016年01月26日 12:49:23 作者：m1870164
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實(shí)例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript+html5 canvas繪制繽紛多彩的三角形效果。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!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動(dòng)畫(huà)與特效用法總結(jié)》及《jQuery常見(jiàn)經(jīng)典特效匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS Canvas定時(shí)器模擬動(dòng)態(tài)加載動(dòng)畫(huà)
- JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫(huà)效果實(shí)例
- js canvas實(shí)現(xiàn)擦除動(dòng)畫(huà)
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫(huà)特效
- javascript+HTML5的Canvas實(shí)現(xiàn)Lab單車動(dòng)畫(huà)效果
- js+canvas繪制五角星的方法
- js+canvas簡(jiǎn)單繪制圓圈的方法
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- js+canvas繪制矩形的方法
- JS+Canvas繪制時(shí)鐘效果
- JavaScript+html5 canvas繪制漸變區(qū)域完整實(shí)例
- JS+canvas繪制的動(dòng)態(tài)機(jī)械表動(dòng)畫(huà)效果
相關(guān)文章
好多情況下flash會(huì)出現(xiàn)需要單擊激活，不過(guò)一般新版本中直接插入隨然不用激活但代碼較多，下面的方法是個(gè)函數(shù)，其實(shí)代碼也不少，不過(guò)思路很好，大家可以看看。2009-03-03
微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了詳解webpack-dev-server使用方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
下面小編就為大家分享一篇用JS實(shí)現(xiàn)非首屏圖片延遲加載的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果
這篇文章主要介紹了js+css繪制顏色動(dòng)態(tài)變化的圈中圈效果,涉及JavaScript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
JavaScript實(shí)現(xiàn)淘寶購(gòu)物件數(shù)選擇
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶購(gòu)物件數(shù)的選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了微信小程序 wepy框架與iview-weapp的用法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
promise面試中經(jīng)常會(huì)遇到的一個(gè)問(wèn)題就是關(guān)于控制并發(fā)的，所以下面這篇文章主要給大家介紹了關(guān)于Promise面試題之控制并發(fā)的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JavaScript?自定義對(duì)象,主要介紹一些方法object創(chuàng)建對(duì)象、使用構(gòu)造函數(shù)創(chuàng)建對(duì)象、字面量創(chuàng)建對(duì)象、等展開(kāi)話題，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12
原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法詳解
最近學(xué)習(xí)中遇到這個(gè)問(wèn)題，為了日后方便查詢，本人翻閱了一些資料總結(jié)了以下方法，僅限原生JS，如有不對(duì)的地方歡迎指出！只求大家看完覺(jué)得有學(xué)到點(diǎn)什么就OK了！下面這篇文章主要介紹了利用原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法,需要的朋友可以參考下。2017-02-02