这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript+html5 canvas 制作的圆中圆效果, 结合完整实例形式分析了基于 JavaScript 与 html5 canvas 技术实现的图形绘制与颜色随机填充技巧, 需要的朋友可以参考下
本文实例讲述了 JavaScript+html5 canvas 制作的圆中圆效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- demo
- </title>
- <style type="text/CSS">
- #canvas { background:#F2F2F2; height:500px; height:500px; margin-top:100px;
- margin-left:200px; }
- </style>
- </head>
- <body>
- <canvas id="canvas" width="500px" height="500px">
- </canvas>
- </body>
- <script type="text/javascript">
- (function() {
- var dyl = {};
- dyl.getDom = function(id) {
- return document.getElementById(id);
- }
- dyl.getContext = function(canvasID) {
- var canvas = this.getDom(canvasID);
- if (!canvas) {
- return null;
- }
- return canvas.getContext("2d");
- }
- if (!window.dyl) {
- window.dyl = dyl;
- }
- })();
- cache = {};
- cache.context = dyl.getContext('canvas');
- // 每个圈的圆个数控制
- cache.scaleNmb = 6;
- cache.createColor = function() {
- var color = "rgb(";
- color += Math.round(Math.random() * 255);
- color += ",";
- color += Math.round(Math.random() * 255);
- color += ",";
- color += Math.round(Math.random() * 255);
- color += ")";
- return color;
- };
- cache.draw = function() {
- cache.context.fillRect( - 10, -10, 20, 20);
- for (var i = 1; i < 10; i++) {
- cache.context.save();
- for (var j = 0; j < cache.scaleNmb * i; j++) {
- cache.context.rotate(Math.PI * 2 / (cache.scaleNmb * i));
- cache.context.fillStyle = cache.createColor();
- cache.context.beginPath();
- cache.context.arc(0, 20 * i, 5, 0, Math.PI * 2, true);
- cache.context.closePath();
- cache.context.fill();
- }
- cache.context.restore();
- }
- };
- cache.init = function() {
- cache.context.translate(250, 250);
- cache.draw();
- };
- cache.init();
- </script>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0412/267356.html