JavaScript+html5 canvas制作的圆中圆效果实例


Posted in Javascript onJanuary 27, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
jQuery ajax分页插件实例代码
Jan 27 #Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 #Javascript
jquery ajax分页插件的简单实现
Jan 27 #Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 #Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 #Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 #Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python csv模块使用方法代码实例
2019/08/29 Python
深入浅析python的第三方库pandas
2020/02/13 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
Eclipse面试题
2014/03/22 面试题
好的旅游活动方案
2014/08/19 职场文书
工程部岗位职责范本
2015/04/11 职场文书
领导新年致辞2016
2015/07/29 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书