8月前 10249 0 0

本文实例讲述了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程序设计有所帮助。

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册