canvas加载gif

最新推荐文章于 2024-08-09 07:13:32 发布

weixin_30709809

最新推荐文章于 2024-08-09 07:13:32 发布

阅读量1.1k

点赞数

文章标签：游戏 javascript ViewUI

原文链接：http://www.cnblogs.com/gaoxue/p/3410537.html

版权

http://ernestdelgado.com/public-tests/gifoncanvas/

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Animated Gif on Canvas</title>
<style type="text/css" media="screen">

body { color: #222; font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; margin: 0 auto; width: 750px; }
img { border: 3px solid yellow; }
canvas { border: 3px solid red; }
.ex-group { border-bottom: 1px solid #ccc; padding-bottom: 15px; }
</style></head>

(function() {
var dx = 0;
drawGif = {
draw: function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = document.getElementById("ex-animated-sprite-gif");

//if(dx >= 550){
this.clearCanvas("myCanvas");
// dx=0;
//}
// dx+=50;
context.drawImage(imageObj, dx, 0,50, 50);
},
clearCanvas: function(canvasEl) {
var cv = document.getElementById(canvasEl);
cv.getContext('2d').clearRect(0, 0, cv.width, cv.height);
}

}
})()

window.onload = (function() {
setInterval(function(){
drawGif.draw();
},150);
});
</script>

</body>
</html>

转载于:https://www.cnblogs.com/gaoxue/p/3410537.html