JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例


Posted in Javascript onJanuary 26, 2016

本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var r_x = 250, r_y = 0;
  var offset_h = 250;
  var offset_w = 500;
  var count = 0;
  var mode = "up";
  var temp = 0;
  var getRPoint = function(x, y) {
   var r = (Math.pow(x, 2) + Math.pow(y, 2)) / (2 * y);
   var point = {
    x: x,
    y: Math.abs(250 - (r - y)),
    r: r
   };
   return point;
  };
  function arc(attrs) {
   ctx.beginPath();
   ctx.arc(attrs.x, attrs.y, attrs.r, attrs.startAngle || 0, attrs.endAngle || Math.PI);
   ctx.stroke();
  }
  var interval = setInterval(function() { 
   count++;
   switch(mode) {
    case "up":
     temp = count;
     ctx.clearRect(0, 0, 500, 500);
     if(count%18 == 0) {
      mode = "down";
      return;
     } 
    break;
    case "down":
     temp = 36 - count;
     ctx.clearRect(0, 0, 500, 500);
     if(count%36 == 0) {
      mode = "default";
      return;
     }     
    break;
    case "default":
     temp = count - 36;
     if(count%54 == 0) {
      mode = "up";
      count = 0;
      return;
     }
   }
   arc(getRPoint(250, 250-8*temp));
  }, 100);
 </script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS模块与命名空间的介绍
Mar 22 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
javascript操作excel生成报表示例
May 08 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue引用js文件的多种方式(推荐)
May 17 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 #Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 #Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 #Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 #Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 #Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 #Javascript
You might like
PHP删除数组中的特定元素的代码
2012/06/28 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
大专毕业生自我鉴定
2013/11/21 职场文书
简历自我评价模版
2014/01/31 职场文书
机关门卫制度
2014/02/01 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
公司委托书范本5篇
2014/09/20 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
伏羲庙导游词
2015/02/09 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis