本文实例讲述了JavaScript html5画布绘制缤纷多彩的三角形效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE HTMl HTMl标题演示/标题样式类型=' text/CSS '正文{ margin :0划水：0;} # canvas { width:500px高度：500 pxborder:3px实心# F2F2F2box-shadow :0 px 0px 25px # 494949；margin:0汽车左边距left :200 pxmargin-top :50 px；}/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas script type=' text/JavaScript ' var colorray=' 01234567890 abcdefbcdef bcdef ' .拆分("");var canvas=文档。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；函数createTriangle(startPos，r，color) { var startX=startPos.x，startY=startPos.yCTX。save()；CTX。strokestyle=color | | ' blackCTX。begin path()；CTX。线宽=2；ctx.moveTo(startX，startY)；CTX。行到(startX r * Math。罪恶(数学.PI/6)，startY r*Math.cos(数学/6))；CTX。行到(startX-r * Math。罪恶(数学.PI/6)，startY r*Math.cos(数学/6))；ctx.lineTo(startX，startY)；CTX。close path()；CTX。笔画()；CTX。restore()；}函数create color(){ var color=' # '；for(var I=0；i6；I){ color=color array[数学。地板(数学。random()*颜色数组。长度)]；}返回颜色；} for(var I=0；i100I){ var x=math。圆(数学。random()* 500)，y=Math.round(Math.random()*500)，color=createColor()；console.log(颜色);createTriangle({x: x，y: y}，50，color)；}/脚本/正文/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。