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


Posted in Javascript onDecember 09, 2016

Canvas 动态进度加载水球

前言

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

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

实现思路

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

sin()函数相关

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

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

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

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

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 制作动态进度加载水球详解及实例代码

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

加入动态效果

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 制作动态进度加载水球详解及实例代码

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

Javascript 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
vue更改数组中的值实例代码详解
Feb 07 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
You might like
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python实现股市信息下载的方法
2015/06/15 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python中的decorator的作用详解
2018/07/26 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python制作抽奖程序代码详解
2021/01/15 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
实习期自我鉴定
2013/10/11 职场文书
《颐和园》教学反思
2014/02/26 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
离婚协议书的范本
2015/01/27 职场文书
党支部综合考察意见
2015/06/01 职场文书
应收账款管理制度
2015/08/06 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers