HTML5图片旋转

最新推荐文章于 2021-06-09 18:28:27 发布

weixin_34167819

最新推荐文章于 2021-06-09 18:28:27 发布

阅读量199

点赞数

文章标签： javascript json ViewUI

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来测试一下我们的图片旋转功能了！

效果如下：

源码下载：

百度盘下载

weixin_34167819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5图片旋转

HTML5图片旋转首先我们使用Cococs2dx-Js-Lite版，来创建一个工程，我们所需要的开发环境如下：1，webstrom2，google chrome浏览器3，cocos2dx-Js-Lite 引擎使用cocos2d-Js也可以！第一步：我们来进行Cocos2dx-Js-Lite来创建工程；我们只需要拷贝这3个文件到我们的工程更目录文件夹中；拷贝完之...
复制链接

扫一扫