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. 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...

  2. Getting the first day in a week with T-SQL

    A colleague just asked me if I knew a way to get the first day in a week in SQL Server. While I'm su ...

  3. Linux：软件安装

    Linux 上的软件安装 四种安装方式 在线安装 从磁盘安装盘deb软件包 从二进制软件包安装 从源代码编译安装 在线安装 在不同的linux发行版上面在线安装方式会有一些差异包括使用的命令及它们的包 ...

  4. oracle数据库中varchar2陷阱

    oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型,在oracle中有三种比较常用的类型:varchar2(byte).varchar2(char).nva ...

  5. Working With Taxonomy Field in CSOM

    How to create taxonomy field with CSOM If you need to programmatic create a taxonomy field, you need ...

  6. 移动开发下Xamarin VS PhoneGap

    跨平台开发 移动应用开发对很多开发人员来说是一种令人恐惧的事情.许多企业希望能够通过开发移动应用程序,来提升企业业务水平,开发原生App时往往又缺少专业的Objective C 或 Java 移动开发 ...

  7. Java-JDK配环境，eclipse工具认识

    一.JDK配环境: 1.JDK思维导图 2.测试代码: 需要注意点位类名大小写的区分,符号为英式输入法下的, ; . class Hello{ public static void main(Stri ...

  8. 酷派大神F2系列使用QPST进行nv备份和恢复，解决无信号问题(附备份文件)

    测试机器: 大神F2联通版 8675_W00 系统COOLUI55     写贴原因: 自己无意间刷错了包,结果手机无信号,进入工程模式怎么设置都没有用.尝试过系统还原(备份过).刷新的ROM.线刷, ...

  9. 重新签名IPA （ iPhone ）

    提示:暂时不能用了,企业证书滥用 ios 企业证书 ipa 重新签名发布 1. 应用场景 当前有一个 未用企业证书签名的 ipa 文件,默认是不可以直接安装到设备上的:我们需要用企业版证书签名: 当前 ...

  10. Spring MVC 文件上传下载

    本文基于Spring MVC 注解,让Spring跑起来. (1) 导入jar包:ant.jar.commons-fileupload.jar.connom-io.jar. (2) 在src/cont ...