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

效果如下：

源码下载：

百度盘下载

 
 

HTML5图片旋转的更多相关文章

  1. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  2. 强大！HTML5 3D美女图片旋转实现教程

    又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...

  3. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  4. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  5. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  6. 分享10款效果惊艳的HTML5图片特效【转】

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  7. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  8. PHPThumb处理图片，生成缩略图，图片尺寸调整，图片截取，图片加水印，图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

  9. js无刷新上传图片，服务端有生成缩略图，剪切图片，iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

随机推荐

  1. [stm32] LED

    /**************************************************************************** * 文件名: main.c * 内容简述: ...

  2. [BTS] Correct the specified Action, or refer to the documentation on the allowed formats for the Actions

    A message sent to adapter "WCF-SAP" on send port "CNILG.iHouse.SAP.WCFSAP" with ...

  3. Spring 依赖注入控制反转实现，及编码解析（自制容器）

    定义: 在运行期,由外部容器动态的将依赖对象动态地注入到组件中. 两种方式: 手工装配 -set方式 -构造器 -注解方式 自动装配(不推荐) 1利用构造器 2set方法注入 dao: package ...

  4. Java程序员的日常—— Properties文件的读写

    在日常的Java程序开发中,Properties文件的读写是很常用的.经常有开发系统通过properties文件来当做配置文件,方便用户对系统参数进行调整. 那么本片就来简单的介绍下,如何使用Prop ...

  5. Atitit.api参数传递的设计

    Atitit.api参数传递的设计 · 引言 · 形参和实参 · 命名实参 · 可选参数 · params,数目可变参数 · 方法解析与重载决策 · 参数传递      [重难点] · ref引用参数 ...

  6. zookeeper 安装与配置

    (1) 下载ZooKeeper,建议选择稳定版,即stable的. [root@bonnie1 ~]# cd /usr/local [root@bonnie1 local]# wget http:// ...

  7. el表达式的function标签

    使用el调用Java方法 1:EL表达式语法允许开发人员开发自定义函数,以调用java类的方法. ~示例:${el:method(params)} ~在EL表达式中调用的只能是java类的静态方法. ...

  8. Android MultiDex兼容包怎么使用？

    在Android系统中安装应用的时候,需要对Dex进行优化,但由于其处理工具DexOpt的限制,导致其id的数目不能够超过65536个.而MultiDex兼容包的出现,就很好的解决了这个问题,它可以配 ...

  9. python判断文件和目录是否存在

    #Python的os.path模块提供了 isdir() 和 isfile()函数,请导入该模块,并调用函数判断指定的目录和文件是否存在. import os print os.path.isdir( ...

  10. SqlServer将没有log文件的数据库文件附加到服务器中

    今天搞了一件很让我不爽的事情,一不小心把一个40多G的数据库日志文件删除,而且在删除之前我又搞了个日志进去,死活附加不了到服务器上去一直提示多个日志不能自动创建,白白浪费了我一个晚上的时间,后来不断的 ...