JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例，包括了JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于js特效相关内容感兴趣的读者
-
本文向大家介绍IOS 绘制三角形的实例详解，包括了IOS 绘制三角形的实例详解的使用技巧和注意事项，需要的朋友参考一下 IOS 绘制三角形的实例详解 先上效果图 上面三角形的代码 画三角形的类 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
我试图用DXUT11画一个简单的三角形，但是我在窗口中看不到三角形。 我努力工作，但仍然找不到问题所在-_- 我检查了D3D函数的每个返回值，它们都返回了S_OK<我可以看到我的窗口显示出来，背景色是我设置为清除窗口的颜色，因此看起来d3d设备是当前创建的，并且后缓冲区被渲染到窗口，但是黄色三角形在哪里 T\u T。。。。。。。。。。。。。。。 我的代码如下：（为了简化问题，我已经删除了所有的检查
-
本文向大家介绍用CSS绘制一个三角形相关面试题，主要包含被问及用CSS绘制一个三角形时的应答技巧和注意事项，需要的朋友参考一下
-
手指任意点击屏幕三点，绘制三角形。 [Code4App.com]
-
我必须在正方形上画一个三角形，带星号，预期输出如下图所示。 指令是这样的：编写一个C程序，从用户那里读取一个数字n，并允许使用“*”字符打印一个带有屋顶的房子。房子应该是一个n×n正方形和屋顶两条45度的对角线形成屋顶（如果n是奇数，屋顶在顶部完美地关闭）。我创建了一个三角形和正方形，但我不能把它们结合起来。三角形