这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 基于 html5 的 canvas 标签实现色相球效果, 结合实例形式分析了基于 canvas 标签实现图形绘制的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 JS 基于 HTML5 的 canvas 标签实现色相球效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>
- JS canvas标签制作色相球
- </title>
- </head>
- <body>
- <canvas>
- </canvas>
- <script type="text/javascript">
- var canvas, ctx, max, p, count;
- window.onload = function() {
- var a, b, r;
- canvas = document.getElementsByTagName('canvas')[0];
- ctx = canvas.getContext('2d');
- canvas.width = canvas.height = 400;
- ctx.fillRect(0, 0, 400, 400);
- max = 80;
- count = 150;
- p = [];
- r = 0;
- for (a = 0; a < max; a++) {
- p.push([Math.cos(r), Math.sin(r), 0]);
- r += Math.PI * 2 / max;
- }
- for (a = 0; a < max; a++) p.push([0, p[a][0], p[a][1]]);
- for (a = 0; a < max; a++) p.push([p[a][1], 0, p[a][0]]);
- rus();
- };
- function rus() {
- var a, b, c, d, e, s, tim, p2, xp, yp, xp2, yp2, x, y, z, x1, y1, z1;
- ctx.globalCompositeOperation = "source-over";
- ctx.fillStyle = "rgba(0,0,0,0.03)";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- ctx.globalCompositeOperation = "lighter";
- tim = count / 5;
- for (e = 0; e < 3; e++) {
- tim *= 1.7;
- s = 1 - e / 3;
- a = tim / 59;
- yp = Math.cos(a);
- yp2 = Math.sin(a);
- a = tim / 23;
- xp = Math.cos(a);
- xp2 = Math.sin(a);
- p2 = [];
- for (a = 0; a < p.length; a++) {
- x = p[a][0];
- y = p[a][1];
- z = p[a][2];
- y1 = y * yp + z * yp2;
- z1 = y * yp2 - z * yp;
- x1 = x * xp + z1 * xp2;
- z = x * xp2 - z1 * xp;
- z1 = Math.pow(2, z * s);
- x = x1 * z1;
- y = y1 * z1;
- p2.push([x, y, z]);
- }
- s *= 120;
- for (d = 0; d < 3; d++) {
- for (a = 0; a < max; a++) {
- b = p2[d * max + a];
- c = p2[((a + 1) % max) + d * max];
- ctx.beginPath();
- ctx.strokeStyle = "hsla(" + ((a / max * 360) | 0) + ",70%,60%,0.15)";
- ctx.lineWidth = Math.pow(6, b[2]);
- ctx.lineTo(b[0] * s + 200, b[1] * s + 200);
- ctx.lineTo(c[0] * s + 200, c[1] * s + 200);
- ctx.stroke();
- }
- }
- }
- count++;
- requestAnimationFrame(rus);
- }
- </script>
- </body>
- </html>
PS:由于这里使用了 HTML5 的相关技术,建议读者使用火狐、谷歌、opera 等支持 HTML5 效果较好的浏览器运行该上述代码。
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0707/332371.html