首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Canvas 制作动态进度加载水球详解及实例代码

Posted in Javascript onDecember 09, 2016

Canvas 动态进度加载水球

前言

之前看到一些球型的动态加载的效果，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。

Canvas 制作动态进度加载水球详解及实例代码

实现思路

关于水波的实现，使用了sin()函数，通过每一帧不断的移动sin()函数曲线，实现水波动态效果。然后，通过绘制圆形路径，进行clip()，实现球型效果。

sin()函数相关

这里说一下sin()函数的相关基础，对于绘制水波的影响。

看一下图，回顾一下中学sin()函数的基础。

Canvas 制作动态进度加载水球详解及实例代码

从图中可以看出，当函数为sin(x)时，值域为[-1, 1]，周期为2π。

当sin(x)乘以一个数，可以改变值域，也就是峰值，如下图：

Canvas 制作动态进度加载水球详解及实例代码

系数大于1时曲线更陡峭，小于1大于0时曲线更缓。

Canvas 制作动态进度加载水球详解及实例代码

当sin(x ± 某个数)时，实现曲线的左右移动，减时右移，加时左移。

Canvas 制作动态进度加载水球详解及实例代码

当sin(x * 某个数)时，曲线的周期会变化，某个数大于1时，周期变短；某个数小于1大于0时，周期变长。

在一点，sin()是一个周期函数，所以只要不断的给它值，它就会周期变化。

Canvas 制作动态进度加载水球详解及实例代码

好了，sin()的数学基础差不多了，接下来开始步入正题。

绘制 sin() 曲线

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

//画布属性
var mW = canvas.width = 700;
var mH = canvas.height = 300;
var lineWidth = 1;


//Sin 曲线属性
var sX = 0;
var sY = mH / 2;
var axisLength = mW; //轴长
var waveWidth = 0.011 ; //波浪宽度,数越小越宽 
var waveHeight = 70; //波浪高度,数越大越高

ctx.lineWidth = lineWidth;


//画sin 曲线函数
var drawSin = function(xOffset){
 ctx.save();

 var points=[]; //用于存放绘制Sin曲线的点

 ctx.beginPath();
 //在整个轴长上取点
 for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
  //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
  var y = -Math.sin((sX + x) * waveWidth);


  points.push([x, sY + y * waveHeight]);
  ctx.lineTo(x, sY + y * waveHeight);  
 }

 //封闭路径
 ctx.lineTo(axisLength, mH);
 ctx.lineTo(sX, mH);
 ctx.lineTo(points[0][0],points[0][1]);
 ctx.stroke()

 ctx.restore();
};
drawSin()
Canvas 制作动态进度加载水球详解及实例代码

此处通过waveWidth和waveHeight调节曲线的陡峭度和周期。

加入动态效果

var speed = 0.04; //波浪速度，数越大速度越快

var xOffset = 0; //波浪x偏移量

速度变量和x偏移变量

var y = -Math.sin((sX + x) * waveWidth + xOffset);

修改y点的函数。

var render = function(){
 ctx.clearRect(0, 0, mW, mH);

 drawSin(xOffset);
 xOffset += speed; //形成动态效果
 requestAnimationFrame(render);
}

render()

加入渲染。

Canvas 制作动态进度加载水球详解及实例代码

百分比控制

因为要加入百分比不同的涨幅效果，所以要对y的坐标时行百分比控制修改。

var dY = mH * (1 - nowRange / 100 );

球型显示

这里需要用到clip()进行球型裁切显示。

ctx.beginPath();
ctx.arc(r, r, cR, 0, 2 * Math.PI);
ctx.clip();

其他

可以通过修改如下变量来修改曲线的形状以及速度：

var waveWidth = 0.015 ; //波浪宽度,数越小越宽 
var waveHeight = 6; //波浪高度,数越大越高
var speed = 0.09; //波浪速度，数越大速度越快

完整代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style type="text/css">
  #c{
   margin: 0 auto;
   display: block;
  }
  #r{
   display: block;
   margin: 0 auto;
  }
  #r::before{
   color: black;
   content: attr(min);
   padding-right: 10px;
  }
  #r::after{
   color: black;
   content: attr(max);
   padding-left: 10px;
  }  
 </style>
</head>
<body>
 <canvas id="c"></canvas>
 <input type="range" id="r" min="0" max="100" step="1">

 <script type="text/javascript">
  var canvas = document.getElementById('c');
  var ctx = canvas.getContext('2d');
  var range = document.getElementById('r');

  //range控件信息
  var rangeValue = range.value;
  var nowRange = 0; //用于做一个临时的range

  //画布属性
  var mW = canvas.width = 250;
  var mH = canvas.height = 250;
  var lineWidth = 2;

  //圆属性
  var r = mH / 2; //圆心
  var cR = r - 16 * lineWidth; //圆半径

  //Sin 曲线属性
  var sX = 0;
  var sY = mH / 2;
  var axisLength = mW; //轴长
  var waveWidth = 0.015 ; //波浪宽度,数越小越宽 
  var waveHeight = 6; //波浪高度,数越大越高
  var speed = 0.09; //波浪速度，数越大速度越快
  var xOffset = 0; //波浪x偏移量

  ctx.lineWidth = lineWidth;

  //画圈函数
  var IsdrawCircled = false;
  var drawCircle = function(){

   ctx.beginPath();
   ctx.strokeStyle = '#1080d0';
   ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
   ctx.stroke();
   ctx.beginPath();
   ctx.arc(r, r, cR, 0, 2 * Math.PI);
   ctx.clip();

  }

  //画sin 曲线函数
  var drawSin = function(xOffset){
   ctx.save();

   var points=[]; //用于存放绘制Sin曲线的点

   ctx.beginPath();
   //在整个轴长上取点
   for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
    //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
    var y = -Math.sin((sX + x) * waveWidth + xOffset);

    var dY = mH * (1 - nowRange / 100 );

    points.push([x, dY + y * waveHeight]);
    ctx.lineTo(x, dY + y * waveHeight);  
   }

   //封闭路径
   ctx.lineTo(axisLength, mH);
   ctx.lineTo(sX, mH);
   ctx.lineTo(points[0][0],points[0][1]);
   ctx.fillStyle = '#1c86d1';
   ctx.fill();

   ctx.restore();
  };

  //写百分比文本函数
  var drawText = function(){
   ctx.save();

   var size = 0.4*cR;
   ctx.font = size + 'px Microsoft Yahei';
   ctx.textAlign = 'center';
   ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
   ctx.fillText(~~nowRange + '%', r, r + size / 2);

   ctx.restore();
  };

  var render = function(){
   ctx.clearRect(0, 0, mW, mH);

   rangeValue = range.value;

   if(IsdrawCircled == false){
    drawCircle(); 
   }

   if(nowRange <= rangeValue){
    var tmp = 1;
    nowRange += tmp;
   }

   if(nowRange > rangeValue){
    var tmp = 1;
    nowRange -= tmp;
   }

   drawSin(xOffset);
   drawText(); 

   xOffset += speed;
   requestAnimationFrame(render);
  }

  render();  
 </script>
</body>
</html>

效果

Canvas 制作动态进度加载水球详解及实例代码

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Canvas 制作动态进度加载水球详解及实例代码

- Author -

lecepin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
详解自动生成博客目录案例
Dec 09 #Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 #Javascript
JS判断是否手机或pad访问实现方法
Dec 09 #Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 #Javascript
利用JS实现页面删除并重新排序功能
Dec 09 #Javascript
Bootstrap table使用方法详细介绍
Dec 09 #Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 #Javascript
裁剪图片(1) reduce()(1) GCN(1) Python(3) 信号同步(1) PIL(1) 进度条(1) Flask(2) 验证码(1) 鲲鹏(1)
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
解析php中const与define的应用区别
2013/06/18 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php二分查找二种实现示例
2014/03/12 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
再谈javascript注入 黑客必备！
2016/09/14 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jquery实现刷新随机变化样式特效（tag标签样式）
2017/02/03 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Vue.js轮播图走马灯代码实例（全）
2019/05/08 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
python备份文件的脚本
2008/08/11 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python在非root权限下的安装方法
2018/01/23 Python
值得收藏，Python 开发中的高级技巧
2018/11/23 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python能做什么
2020/06/02 Python
3.12植树节活动总结2014
2014/03/13 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
辞职书格式样本
2015/02/26 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android