这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript+html5 canvas 绘制缤纷多彩的三角形效果, 以完整实例形式分析了 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>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0406/267373.html