Canvas 制作動態(tài)進(jìn)度加載水球詳解及實(shí)例代碼
Canvas 動態(tài)進(jìn)度加載水球
前言
之前看到一些球型的動態(tài)加載的效果，一直想自己動手做一個(gè)，正好這段時(shí)間重溫了一個(gè)Canvas，所以就嘗試了一下。
實(shí)現(xiàn)思路
關(guān)于水波的實(shí)現(xiàn)，使用了sin()函數(shù)，通過每一幀不斷的移動sin()函數(shù)曲線，實(shí)現(xiàn)水波動態(tài)效果。然后，通過繪制圓形路徑，進(jìn)行clip()，實(shí)現(xiàn)球型效果。
sin()函數(shù)相關(guān)
這里說一下sin()函數(shù)的相關(guān)基礎(chǔ)，對于繪制水波的影響。
看一下圖，回顧一下中學(xué)sin()函數(shù)的基礎(chǔ)。
從圖中可以看出，當(dāng)函數(shù)為sin(x)時(shí)，值域?yàn)?code>[-1, 1]，周期為2π。
當(dāng)sin(x)乘以一個(gè)數(shù)，可以改變值域，也就是峰值，如下圖：
系數(shù)大于1時(shí)曲線更陡峭，小于1大于0時(shí)曲線更緩。
當(dāng)sin(x ± 某個(gè)數(shù))時(shí)，實(shí)現(xiàn)曲線的左右移動，減時(shí)右移，加時(shí)左移。
當(dāng)sin(x * 某個(gè)數(shù))時(shí)，曲線的周期會變化，某個(gè)數(shù)大于1時(shí)，周期變短；某個(gè)數(shù)小于1大于0時(shí)，周期變長。
在一點(diǎn)，sin()是一個(gè)周期函數(shù)，所以只要不斷的給它值，它就會周期變化。
好了，sin()的數(shù)學(xué)基礎(chǔ)差不多了，接下來開始步入正題。
繪制 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 ; //波浪寬度,數(shù)越小越寬
var waveHeight = 70; //波浪高度,數(shù)越大越高
ctx.lineWidth = lineWidth;
//畫sin 曲線函數(shù)
var drawSin = function(xOffset){
ctx.save();
var points=[]; //用于存放繪制Sin曲線的點(diǎn)
ctx.beginPath();
//在整個(gè)軸長上取點(diǎn)
for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
//此處坐標(biāo)(x,y)的取點(diǎn)，依靠公式 “振幅高*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調(diào)節(jié)曲線的陡峭度和周期。
加入動態(tài)效果
var speed = 0.04; //波浪速度，數(shù)越大速度越快
var xOffset = 0; //波浪x偏移量
速度變量和x偏移變量
var y = -Math.sin((sX + x) * waveWidth + xOffset);
修改y點(diǎn)的函數(shù)。
var render = function(){
ctx.clearRect(0, 0, mW, mH);
drawSin(xOffset);
xOffset += speed; //形成動態(tài)效果
requestAnimationFrame(render);
}
render()
加入渲染。
百分比控制
因?yàn)橐尤氚俜直炔煌臐q幅效果，所以要對y的坐標(biāo)時(shí)行百分比控制修改。
var dY = mH * (1 - nowRange / 100 );
球型顯示
這里需要用到clip()進(jìn)行球型裁切顯示。
ctx.beginPath(); ctx.arc(r, r, cR, 0, 2 * Math.PI); ctx.clip();
其他
可以通過修改如下變量來修改曲線的形狀以及速度：
var waveWidth = 0.015 ; //波浪寬度,數(shù)越小越寬 var waveHeight = 6; //波浪高度,數(shù)越大越高 var speed = 0.09; //波浪速度，數(shù)越大速度越快
完整代碼
<!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; //用于做一個(gè)臨時(shí)的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 ; //波浪寬度,數(shù)越小越寬
var waveHeight = 6; //波浪高度,數(shù)越大越高
var speed = 0.09; //波浪速度，數(shù)越大速度越快
var xOffset = 0; //波浪x偏移量
ctx.lineWidth = lineWidth;
//畫圈函數(shù)
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 曲線函數(shù)
var drawSin = function(xOffset){
ctx.save();
var points=[]; //用于存放繪制Sin曲線的點(diǎn)
ctx.beginPath();
//在整個(gè)軸長上取點(diǎn)
for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
//此處坐標(biāo)(x,y)的取點(diǎn)，依靠公式 “振幅高*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();
};
//寫百分比文本函數(shù)
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>
效果
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
在JavaScript中,${}用于模板文字（template?literals）,為ES6中新增的字符串方法,其作用是配合反單引號實(shí)現(xiàn)字符串拼,代替以前傳統(tǒng)復(fù)雜的引號雙引號與+的拼接,簡介明了,非常好用,本文給大家介紹JS中‘${}‘什么意思有什么作用,感興趣的朋友一起看看吧2023-08-08
教你如何在 Javascript 文件里使用 .Net MVC Razor 語法
文章主要是介紹了通過一個(gè)第三方類庫RazorJS，實(shí)現(xiàn)Javascript 文件里使用 .Net MVC Razor 語法，很巧妙，推薦給大家2014-07-07
Javascript實(shí)現(xiàn)div層漸隱效果的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)div層漸隱效果的方法,涉及javascript操作頁面元素與樣式變化的相關(guān)技巧,需要的朋友可以參考下2015-05-05
Bootstrap是twitter的工程師在業(yè)余時(shí)間開發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識bootstrap的相關(guān)知識，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了js本地圖片預(yù)覽實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
發(fā)個(gè)自己寫的表格操作類(添加，刪除，排序，上移，下移)
發(fā)個(gè)自己寫的表格操作類(添加，刪除，排序，上移，下移)...2006-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易聊天對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
詳談ES6中的迭代器(Iterator)和生成器(Generator)
下面小編就為大家?guī)硪黄斦凟S6中的迭代器(Iterator)和生成器(Generator)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法
js驗(yàn)證模型自我實(shí)現(xiàn)的具體方法，需要的朋友可以參考一下2013-06-06