HTML5圖片旋轉
首先我們使用Cococs2dx-Js-Lite版，來創建一個工程，我們所需要的開發環境如下：
1，webstrom
2，google chrome瀏覽器
3，cocos2dx-Js-Lite 引擎 使用cocos2d-Js也可以！
第一步：
我們來進行Cocos2dx-Js-Lite來創建工程；
我們只需要拷貝這3個文件到我們的工程更目錄文件夾中；
拷貝完之后我們根目錄如下：
然后我們在我們webstrom中創建兩個路徑文件夾res（存放圖片資源）,src文件夾(存放js代碼）
然后我們更改我們index.html里面的代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Cocos2d-JS</title>
<script type="text/javascript" src="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來測試一下我們的圖片旋轉功能了！
效果如下：
源碼下載：