js预加载loading的canvas写法（无图片）。

最新推荐文章于 2020-05-03 00:00:11 发布

陈远航

最新推荐文章于 2020-05-03 00:00:11 发布

阅读量1.6k

点赞数 1

分类专栏： js笔记文章标签： javascript

本文链接：https://blog.csdn.net/ruoguocpp1/article/details/52934811

版权

js笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不需要页面图片显示加载</title>
<style>
html{
background: gray;
}
#loading{
z-index: 200;
position: fixed;
top: 50%;
left: 50%;
border:1px solid red;
}
#loading-screen {
display: block;
position: absolute;
text-align: center;
width: 60px;
height: 60px;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
left: 50%;
background: white;
border-radius: 5px;
z-index: 500;
}
#canvas-font-wrap{
font-family: '微软雅黑';
position:relative;
height: 60px;
width:60px;
line-height: 60px;
text-align: center;
color: darkgray;
}
.font-center{
height: 48px;
width:48px;
border:2px solid rgb(223,223,223);
border-radius: 25px;
line-height:48px;
position: absolute;
left: 4px;
top:4px;
}

#loading-screen .vip-cvs {
position: absolute;
left: 0;
top: 0;
-webkit-transform: translate(-25%,-25%) scale(0.5);
transform: translate(-25%,-25%) scale(0.5);
}

</style>
</head>
<body>
<div id="loading">
<div id='loading-screen'>
<div id="canvas-font-wrap"style="">
<div class="font-center" style="">cpp</div>
</div>
<canvas class='vip-cvs' width='120' height='120' id="canvas"></canvas>
</div>
</div>

<script type="text/javascript" src="../js/jquery.min.js" ></script>

<script type="text/javascript" src="../js/loadAnimation.js" ></script>
<script type="text/javascript">
showLoadingScreen();
</script>
</body>
</html>

页面加载打圈的js写法：

/**
* Created by chenxiaopeng on 2016/10/13.
*/
var loadingHandel = null;
function initLoadingAnimate() {
var step = 0;
var bg = $('.vip-cvs')[0];
var ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var lineColor = '#e5007f';
var backforward = true;

ctx.clearRect(0, 0, 120, 120);
ctx.beginPath();
ctx.strokeStyle = lineColor;
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 2.8;
imd = ctx.getImageData(0, 0, 120, 120);

var draw = function(current) {
ctx.putImageData(imd,0,0,0,0,120,120);
ctx.beginPath();
ctx.arc(60, 60, 50, -(quart), ((circ) * current) - quart, backforward);
ctx.stroke();
}

function stepDraw() {
//draw(0.5);
step += 0.01;
draw(step);
if (step >= 0.99) {
step = 0;
if (!backforward) {
backforward = true;
} else {
backforward = false;
}
}
}

loadingHandel = setInterval(stepDraw, 10);
}

function clearLoadingAnimation() {
clearInterval(loadingHandel);
}

function showLoadingScreen() {
initLoadingAnimate();
$('#loading').show();
}

function hideLoadingScreen() {
clearLoadingAnimation();
$('#loading').hide();

}

//需要引进jquery，整个页面没有图片，很棒。

陈远航

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js预加载loading的canvas写法（无图片）。

/** * Created by chenpengpeng on 2016/10/13. */var loadingHandel = null;function initLoadingAnimate() { var step = 0; var bg = $('.vip-cvs')[0]; var ctx = bg.getContext('2d');
复制链接

扫一扫

专栏目录