手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
摘要:本文实例讲述了JavaScript+html5canvas绘制缤纷多彩的三角形效果。分享给大家供大家参考,具体如下:运行效果截图如下:具体代...

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

运行效果截图如下:

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

具体代码如下:

<!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>

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

【JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例】相关文章:

js+html5实现canvas绘制简单矩形的方法

JavaScript实现的MD5算法完整实例

javascript删除元素节点removeChild()用法实例

javaScript中push函数用法实例分析

JavaScript中isPrototypeOf函数作用和使用实例

js+html5实现canvas绘制镂空字体文本的方法

javaScript中slice函数用法实例分析

JavaScript中exec函数用法实例分析

JS+CSS实现的拖动分页效果实例

Javascript实现div的toggle效果实例分析

精品推荐
分类导航