JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

2019-11-20 10:41:22

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery form插件的使用之处理server返回的JSON， XML，HTML数据

下一篇：JavaScript+html5 canvas制作的百花齐放效果完整实例