html5 波浪 百分比,html5 css3圆形波浪百分比加载动画特效

html5 css3圆形波浪百分比加载动画特效

js代码

var wave = (function () {

var ctx;

var waveImage;

var canvasWidth;

var canvasHeight;

var needAnimate = false;

function init (callback) {

var wave = document.getElementById('wave');

var canvas = document.createElement('canvas');

if (!canvas.getContext) return;

ctx = canvas.getContext('2d');

canvasWidth = wave.offsetWidth;

canvasHeight = wave.offsetHeight;

canvas.setAttribute('width', canvasWidth);

canvas.setAttribute('height', canvasHeight);

wave.appendChild(canvas);

waveImage = new Image();

waveImage.onload = function () {

waveImage.onload = null;

callback();

}

waveImage.src = 'images/wave.png';

}

function animate () {

var waveX = 0;

var waveY = 0;

var waveX_min = -203;

var waveY_max = canvasHeight * 0.7;

var requestAnimationFrame =

window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function (callback) { window.setTimeout(callback, 1000 / 60); };

function loop () {

ctx.clearRect(0, 0, canvasWidth, canvasHeight);

if (!needAnimate) return;

if (waveY < waveY_max) waveY += 1.5;

if (waveX < waveX_min) waveX = 0; else waveX -= 3;

ctx.globalCompositeOperation = 'source-over';

ctx.beginPath();

ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

ctx.globalCompositeOperation = 'source-in';

ctx.drawImage(waveImage, waveX, canvasHeight - waveY);

requestAnimationFrame(loop);

}

loop();

}

function start () {

if (!ctx) return init(start);

needAnimate = true;

setTimeout(function () {

if (needAnimate) animate();

}, 500);

}

function stop () {

needAnimate = false;

}

return {start: start, stop: stop};

}());

wave.start();

申明：本站所有资源都是转载各大下载站，或由网友投稿发布，请自行检测软件的完整性，如有侵权请联系我们删除下架，联系方式：admin@php.cn