星空网 > 软件开发 > 网页设计

HTML5图片旋转

HTML5图片旋转

首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下:

1,webstrom

2,google chrome浏览器

3,cocos2dx-Js-Lite 引擎 使用cocos2d-Js也可以!

第一步:

我们来进行Cocos2dx-Js-Lite来创建工程;

HTML5图片旋转

我们只需要拷贝这3个文件到我们的工程更目录文件夹中;

拷贝完之后我们根目录如下:

HTML5图片旋转

然后我们在我们webstrom中创建两个路径文件夹res(存放图片资源),src文件夹(存放js代码)

然后我们更改我们index.html里面的代码:

index.html

<!DOCTYPE html><html><head>  <title>Hello Cocos2d-JS</title>   <script type="text/javascript" src='/images/loading.gif' data-original="cocos2d-js-v3.6-lite.js" charset="UTF-8"></script></head><body>    <canvas id="gameCanvas" width="640" height="1136"></canvas>  <script type="text/javascript">     window.onload = function(){       cc.game.onStart = function(){         //load resources         cc.LoaderScene.preload([], function () {           var MyScene = cc.Scene.extend({             onEnter:function () {               this._super();               var mainlayer = new MainLayer();               this.addChild(mainlayer);             }           });           cc.director.runScene(new MyScene());         }, this);       };       cc.game.run("gameCanvas");     };  </script></body></html>

第二步:

我们需要创建一个层MainLayer.js,创建这个层添加到我们的MyScene中

在我们res目录中添加logo.png这张示例图片!

MainLayer.js

/** * Created by yangshengjiepro on 15/6/29. */var MainLayer = cc.Layer.extend({  ctor:function(){    this._super();    cc.log("MainLayer ok");    var basesize = cc.size(640,1136);    //创建一张图片    var Logo = cc.Sprite.create("res/logo.png");    Logo.attr({      x:basesize.width/2,      y:basesize.height/2    });    this.addChild(Logo);    //创建一个旋转动作,cc.rotateBy动作来实现旋转    var action_rotate = cc.rotateBy(1,-360);    Logo.runAction(cc.repeatForever(action_rotate));  }});


我们用到了cc.Sprite.create来创建一张图片精灵

然后再使用cc.rotateBy来创建一个旋转动作

最后让图片执行这个动作,让我们的图片旋转起来

第三步:

在我们的project.json配置文件里面在jslist这个数组中添加我们的MainLayer.js的路径

{  "debugMode"   : 1,  "frameRate"   : 60,  "id"      : "gameCanvas",  "renderMode"  : 1,  "jsList"    : [    "src/MainLayer.js"  ]}

最后就可以右键点击我们的index.html来测试一下我们的图片旋转功能了!

效果如下:

HTML5图片旋转

源码下载:

百度盘下载

 

 

 

 

 

 

 

 

 

 

 
 



原标题:HTML5图片旋转

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

GandengTangan:https://www.ikjzd.com/w/1848
易可达:https://www.ikjzd.com/w/1849
中东平台Souq:https://www.ikjzd.com/w/185
p2p贷款平台:https://www.ikjzd.com/w/1850
中商惠民:https://www.ikjzd.com/w/1851
Kopi Kenangan:https://www.ikjzd.com/w/1852
3月独立站新品观察:比基尼、连衣裙、凉鞋、止汗霜等夏季新品热推! :https://www.kjdsnews.com/a/1836553.html
3月独立站新品观察:比基尼、连衣裙、凉鞋、止汗霜等夏季新品热推! :https://www.goluckyvip.com/news/188216.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流