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 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 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 删除记录实现代码
2009/03/12 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
用matplotlib画等高线图详解
2017/12/14 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
20年同学聚会感言
2014/02/03 职场文书
小学毕业感言50字
2014/02/16 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
护士节活动总结
2014/08/29 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫