html5canvas人物跑步运动场景动画特效.zip资源-CSDN文库

共7个文件

png：4个

js：2个

html：1个

版权申诉

特效代码

jquery插件

jquery特效

2 浏览量 2023-09-26 01:42:33 上传评论收藏 234KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5 canvas人物跑步运动场景动画特效.zip （7个子文件）

easeljs.min.js 125KB

jquery.min.js 85KB

img

ground.png 2KB

ren.png 179KB

hill1.png 4KB

hill2.png 4KB

index.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html5 canvas人物跑步运动场景动画特效</title> </head> <body> <canvas id="mycanvas" width="800" height="500"></canvas> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/easeljs.min.js"></script> <script > // 图片预加载 function loadImages(sourse,callback){ var count = 0, images = {}, imgNum = 0; for(src in sourse){ imgNum++ } for(src in sourse){ images[src] = new Image(); images[src].onload = function(){ if(++count >= imgNum){ callback(images); } } images[src].src = sourse[src]; } } $(document).ready(function(){ var stage = new createjs.Stage("mycanvas") createjs.Ticker.addEventListener("tick", stageBreakHandler); // 图片预加载 var sources = { groundImg : "img/ground.png", hill1 : "img/hill1.png" , hill2 : "img/hill2.png" , ren : "img/ren.png" , }; var sp,ground,hill1,hill2 loadImages(sources, function(images){ // 天空背景 var sky = new createjs.Shape() sky.graphics.beginLinearGradientFill(["#7dcef6","#c1e2f2"],[0, 1], 0, 580, 0, 500).drawRect(0,0,800,500) // 山 hill1 = new createjs.Bitmap(images.hill1) hill1.set({x:-300,y:150,alpha:0.5,scaleX:3,scaleY:5}); hill1.iw = images.hill1.width hill2 = new createjs.Bitmap(images.hill2) hill2.set({x:210,y:500-220,scaleX:3,scaleY:3}); hill2.iw = images.hill2.width // 地板 ground = new createjs.Shape() ground.graphics.beginBitmapFill(images.groundImg).drawRect(0,0,800+images.groundImg.width,images.groundImg.height) ground.y = 500 - images.groundImg.height; ground.tileW = images.groundImg.width; // 人 var ss = new createjs.SpriteSheet({ "images": [images.ren], "frames": {"width":165,"height":292,count:64}, "animations" : { "run": [0,36,"jump",1.5], "jump":[36,63,"run"] } }) sp = new createjs.Sprite(ss,"run") sp.x = 100 sp.y = 500 - 292 - 79 stage.addChild(sky,hill1,hill2,ground, sp) stage.update(); }); function stageBreakHandler(event){ // event.delta -- 上一次tick到当前tick的ms var deltaS = event.delta / 1000; ground.x = (ground.x - deltaS * 150) % ground.tileW; hill1.x = (hill1.x - deltaS * 30); hill2.x = (hill2.x - deltaS * 30); sp.x+=5 if(sp.x>=800){ sp.x = 0 hill1.x = -300; hill2.x = 200; } stage.update(); } }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉