联系客服
15985840591

canvas和css实现gif动画

分享 未结 0 3
白茶大师
白茶大师 VIP3 2018年07月24日
<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    
<title>canvas gif</title>    
<style>    
.gif{    
	background:url(gif.png);    
	width:180px;    
	height:300px;    
	animation-name: gif;    
	animation-duration: 1000ms;    
	animation-iteration-count: infinite;    
	animation-timing-function:step-start;    
}    
@-webkit-keyframes gif{    
0% {background-position: 0 0;}    
14.3% {background-position: -180px 0;}    
28.6% {background-position: -360px 0;}    
42.9% {background-position: -540px 0;}    
57.2% {background-position: -720px 0;}    
71.5% {background-position: -900px 0;}    
85.8% {background-position: -1080px 0;}    
100% {background-position: 0 0;}    
}    
</style>    
</head>    
<body>    
<div class="gif"></div>    
<canvas id="cvgif" width="180" height="300"></canvas>    
<script>    
var imgPic = new Image();    
imgPic.src = 'gif.png';    
var canvas = document.querySelector('canvas');    
var ctx = canvas.getContext('2d');    
imgPic.onload = function () {    
drawImg()    
}    
var i = 0;    
var lastTime = new Date().getTime();    
var delatime;    
var timer = 0;    
	var gw=160;    
	var gh=300;    
function drawImg() {    
window.requestAnimationFrame(drawImg);    
var now = new Date().getTime();    
delatime = now - lastTime;    
lastTime = now;    
timer += delatime;    
		if (timer > 150) {    
			ctx.fillStyle="#FFffff";    
			ctx.fillRect(0,0,gw,gh);    
			ctx.drawImage(imgPic, 180*i, 0, gw, gh, 0,0, gw, gh);    
i++;    
if (i > 6) i = 0;    
timer = 0;    
}    
}    
</script>    
</body>    
</html>

gif.png

回帖
  • 消灭零回复
 

回贴周榜

本周热议
没有相关数据
layui

微信扫码关注 得推网 公众号