<html>
<body>
<canvas id="butterfly"></canvas>
</body>
</html>
<script>
var image = new Image();
image.src = 'butterfly-sheets.png';
var sprite = function(opt) {
var sprite_proto = {};
sprite_proto.image = opt.image;
sprite_proto.rect = opt.rect;
sprite_proto.frames = opt.frames;
sprite_proto.current_frame_idx = 0;
sprite_proto.next = function() {
var cur_frame = this.frames[this.current_frame_idx];
this.current_frame_idx += 1;
if (this.current_frame_idx == this.frames.length) {
this.current_frame_idx = 0;
}
return cur_frame;
};
return sprite_proto;
}
var butterfly = sprite({
image: image,
rect:{x: 0, y: 0, w: 17, h: 17},
frames: [
{x: 199, y: 96, w: 17, h: 17},
{x: 231, y: 96, w: 17, h: 17},
{x: 263, y: 96, w: 17, h: 17}
]
});
var canvas = document.getElementById('butterfly');
canvas.width = 800;
canvas.height = 600;
var world = function(opt) {
var world_proto = {};
world_proto.context = opt.context;
world_proto.rect = opt.rect;
world_proto.clear = function() {
this.context.clearRect(0, 0, this.rect.w, this.rect.h);
}
world_proto.render = function(sprite) {
var frame = sprite.next();
this.context.drawImage(
sprite.image,
frame.x,
frame.y,
frame.w,
frame.h,
0,
0,
sprite.rect.w,
sprite.rect.h
);
}
return world_proto;
}
var my_world = world({
context: canvas.getContext('2d'),
rect: {x: 0, y: 0, w: 800, h: 600}
});
image.addEventListener('load', function(){
setInterval(function(){
my_world.clear();
my_world.render(butterfly);
},200);
});
</script>
HTML Canvas 学习过程中的一些代码.zip
需积分: 0 48 浏览量
更新于2023-12-30
收藏 116KB ZIP 举报
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码
HTML
HTML Canvas 学习过程中的一些代码.zip （8个子文件） 
code_111230 
LICENSE 34KB canvas1 image 
diejia.gif 11KB
markman.png 51KB effect.gif 42KB eg.gif 8KB code 
canvas1.html 2KB butterfly-sheets.png 6KB .gitignore 10B2019-05-27 上传
5星 · 资源好评率100% 5星 · 资源好评率100%124 浏览量
132 浏览量
5星 · 资源好评率100%2022-12-25 上传
2023-04-03 上传
5星 · 资源好评率100%190 浏览量
5星 · 资源好评率100%资源评论
