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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Canvas 制作动态进度加载水球详解及实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4953字，纯文字阅读大概需要8分钟。

内容图文

Canvas 动态进度加载水球

前言

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

Canvas 制作动态进度加载水球详解及实例代码 - 文章图片

实现思路

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

sin()函数相关

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

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

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

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

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

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

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

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

好了，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()

此处通过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()

加入渲染。

百分比控制

因为要加入百分比不同的涨幅效果，所以要对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 制作动态进度加载水球详解及实例代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/347942.html

来源：【匿名】

【上一篇】微信小程序 wxapp画布 canvas详细介绍【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【Canvas 制作动态进度加载水球详解及实例代码】教程文章相关的互联网学习教程文章

分享HTML5Canvas画印章效果实例代码

$velocityCount 下面分享一个用HTML5 Canvas画印章效果实例代码，可以看一下<!DOCTYPE html> <html> <head><meta charset="gbk"><title>HTML5 Canvas画印章</title> </head> <body><canvas id="canvas" width="200" height="200"></canvas> <script>var canvas = document.getElementById("canvas"); var context = canvas.getContext(2d);var text = "XXX专用章";var companyName = "浙江网络科技股份有限公司";// 绘制印章边框...

JS+canvas画一个圆锥实例代码_javascript技巧【图】

本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例，canvas是html5中新增加的新属性，对HTML5中的canvas感兴趣的朋友学习测试下吧。以下是我们给大家分享是实例代码：<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <canvas id=cvs width=1000 height="800"> </canvas> <script> const cvs =document.getElementById(cvs);// 计算画布的宽度const width = cvs.offsetWidth;// 计算画布的高...

canvas画动画时钟的实例代码【图】

今天的时间比较充裕，心血来潮，为大家分享一个html5的小例子，希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例，希望对你们的学习有帮助！高手嘛！请跳过吧！我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself！<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <title>Title</title> </head><body onload="draw()"> <canvas id="canvas" width="300" height="300"> </canv...

html5canvasjs(数字时钟)实例代码_javascript技巧【图】

代码如下: canvas dClock 您的浏览器太古董了，升级吧！ var clock = document.getElementById("clock"); var cxt = clock.getContext("2d");//显示数字时钟 function showTime(m, n) { cxt.clearRect(0, 0, 500, 500);var now = new Date; var hour = now.getHours(); var min = now.getM...

JS+canvas画一个圆锥实例代码【图】

以下是我们给大家分享是实例代码： <html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <canvas id=cvs width=1000 height="800"> </canvas> <script> const cvs =document.getElementById(cvs);// 计算画布的宽度const width = cvs.offsetWidth;// 计算画布的高度const height = cvs.offsetHeight; const ctx = cvs.getContext(2d);// 设置宽高cvs.width = width;cvs.height = height; /** ctx：context x,y:偏移...

利用canvas实现的加载动画效果实例代码【图】

前言以前在浏览文章时，看到过一个Android的加载效果，觉得挺好看的，于是自己就模仿了一个。下面话不多说，我们直接来看看详细的介绍吧。运行效果图分析下这个效果： 1.可以把这四个方块标号 2.这个运动效果其实只用分解为两段动画，一段是上下移动，一段是左右移动。示例代码： /*核心代码*/ /*分析动画，其实动画只有两次的执行*/var for_index = 1;//记录当前执行动画的序列var interval = setInterval(function(){...

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

Canvas 动态进度加载水球前言之前看到一些球型的动态加载的效果，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。实现思路关于水波的实现，使用了sin()函数，通过每一帧不断的移动sin()函数曲线，实现水波动态效果。然后，通过绘制圆形路径，进行clip()，实现球型效果。 sin()函数相关这里说一下sin()函数的相关基础，对于绘制水波的影响。看一下图，回顾一下中学sin()函数的基础。从图中可以看出，...

微信小程序 canvas API详解及实例代码【图】

绘图是每个移动应用必备的技术，基本上和Android，IOS，等移动开发都是相同的，创建个上下文，给你个画布再上画，官网给的小例子都比较全了自己去看吧，drawImage时没有反应不知道是BUG还是电脑不能测试待定，http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的...

html5 canvas js(数字时钟)实例代码【图】

代码如下:<!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览器太古董了，升级吧！ </canvas> <script type = "text/javascript"> var clock = document.getElementById("clock"); var cxt = clock.getContext("2d"); //显示数字时钟 fu...

HTML5canvas实现中奖转盘的实例代码【图】

本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）代码很简单，都注释了，直接上代码吧，嘤嘤嘤html<body><canvas id="canvas">您的浏览器不支持canvas</canvas><img src="./zp.jpg" alt="" id="img"> </body>css<style>#...

分享h5canvas圆圈进度条的实例代码【图】

实现h5 canvas圆圈进度条的实例代码，本人的想法有很多，但是利用canvas无疑是最方便的解决办法，在此以canvas实现为例子，具体实现步骤如下：Paste_Image.png<!DOCTYPE html> <html> <meta charset="utf-8"> <head><title></title><style type="text/css">*{margin: 0;padding: 0;}</style> </head> <body><canvas id="canvas1"></canvas><canvas id="can...

分享利用canvas实现知乎登录页的实例代码【图】

本篇文章主要介绍了canvas简单快速实现知乎登录页背景效果的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧前言打开知乎的登录页，就可以看到其背景有一个动效，看起来好像蛮不错的样子：这个效果使用canvas是不难实现的，接下来就一步一步地讲解并实现这个效果。分析在动工之前先分析这个效果到底是如何运动的。首先要理解的是虽然看起来好像所有线和圆都在运动，但实际上只有圆才是在运动的，而线只不过是把满足一定条...

分享利用HTML5的Canvas制作人脸的实例代码【图】

这里主要使用了 HTML5 的 Canvas 进行绘制。利用html5制作人脸的实例代码。先看我们要绘制的人脸效果图：这里主要使用了 HTML5 的 Canvas 进行绘制。下面我们开始整个绘制过程：1. HTML (index.html)<!DOCTYPE html> <html lang="en" ><head><meta charset="utf-8" /><title>HTML5 Face Builder | Script Tutorials</title><link href="css/main.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jqu...

HTML5组件Canvas实现图像灰度化的实例代码

HTML5发布已经有很长一段时间了，一直以来从来没有仔细的看过，过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大，不怪很多牛人预言Flash已死，死不死不是我要关心的，我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。一起来看看HTML5 Canvas是怎么做到的吧！1. 新建一个html页面，在body tag之间加入<canvas id="myCanvas" >Gray Filter</canvas>2. 添加一段最简单的JavaScript代码：window.onload = functi...

HTML5Canvas填充与描边(FillAndStroke)实现的实例代码【图】

HTML5 Canvas 填充与描边(Fill And Stroke)演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。一：颜色填充与描边颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例如下：// fill and stroke text ctx.font = 60pt Calibri; ctx.lineWidth = 3; ctx.strokeStyle = green; ctx.strokeText(Hello World!, 20, 100); ctx.fillStyle = red; ctx.fillText(Hello World!, 20, 10...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【Canvas 制作动态进度加载水球详解及实例代码】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

加载 - 相关标签

实例 - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程