【免费】HTMLCanvas学习过程中的一些代码.zip资源-CSDN文库

共8个文件

gif：3个

png：2个

gitignore：1个

html

需积分: 0 42 浏览量 2023-12-30 12:34:22 上传评论收藏 116KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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 10B

<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>

评论收藏

内容反馈