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来测试一下我们的图片旋转功能了！
效果如下：
源码下载：