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、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
design vue 表格开启列排序的操作
Oct 28 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
简单的cookie计数器实现源码
2013/06/07 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python字符串反转的四种方法详解
2019/12/02 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python程序慢的重要原因
2020/09/04 Python
css3的transition属性详解
2014/12/15 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
北承题目(C++)
2012/05/16 面试题
应聘自荐信
2013/12/14 职场文书
毕业生自荐书
2014/02/02 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python