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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
微信网页登录逻辑与实现方法
Apr 29 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python放大图片和画方格实现算法
2018/03/30 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
科长竞聘演讲稿
2014/05/16 职场文书
白莲教口号
2014/06/18 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
先进个人自荐书
2015/03/06 职场文书
奖励通知
2015/04/22 职场文书
老兵退伍感言
2015/08/03 职场文书
2019销售早会主持词
2019/06/27 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python