JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016-01-26 11:44
946 查看
本文实例讲述了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>
更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JavaScript+html5 canvas实现本地截图教程
- js+canvas绘制矩形的方法
- js+canvas简单绘制圆圈的方法
- js+canvas绘制五角星的方法
- JavaScript+html5 canvas制作的圆中圆效果实例
- JavaScript+html5 canvas绘制的小人效果
- JavaScript+html5 canvas制作色彩斑斓的正方形效果
- JavaScript html5 canvas画布中删除一个块区域的方法
- JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- JavaScript+html5 canvas绘制渐变区域完整实例
- JavaScript+canvas实现七色板效果实例
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子