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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
JS 基本概念详细介绍
Oct 16 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
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php 数据结构之链表队列
2017/10/17 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
prototype class详解
2006/09/07 Javascript
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python查看数据类型的方法
2019/10/12 Python
学Python 3的理由和必要性
2019/11/19 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
高考考python编程是真的吗
2020/07/20 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
吸烟检讨书2000字
2014/02/13 职场文书
旷工辞退通知书
2015/04/17 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
MySQL基础(二)
2021/04/05 MySQL
python实现层次聚类的方法
2021/11/01 Python