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. Week1 Java 基础知识

    JDK=JRE+Tools   JRE=JVM+API 封装:1.模块化:将属性和行为封装在类中,程序定义很多类:2.信息隐蔽:将类的细节部分隐藏起来,用户只通过受保护的接口访问某个类. 继承:父类和 ...

  2. 用c#开发微信 (14) 微统计 - 阅读分享统计系统 4 部署测试 (最终效果图)

    微信平台自带的统计功能太简单,有时我们需要统计有哪些微信个人用户阅读.分享了微信公众号的手机网页,以及微信个人用户访问手机网页的来源:朋友圈分享访问.好友分享消息访问等.本系统实现了手机网页阅读.分享 ...

  3. ASP.NET Core重写个人博客站点小结

    今天用ASP.NET Core重写了个人博客站点,原来是基于ASP.NET 4.5开发的.重写工作总体很顺利,最后成功发布到Ubunt+Nginx平台上.效果如下: 右边的Header信息里可以看到已 ...

  4. 腾讯云CentOS 6.6安装 Nginx

    一.下载Nginx 从Nginx的官网(http://nginx.org/en/download.html)下载Nginx的最新版本,这里我下载的是nginx-1.9.12. 下载完成后,得到一个如下 ...

  5. Atitit.Hibernate中Criteria 使用总结and 关联查询 and 按照子对象查询 o9o

    Atitit.Hibernate中Criteria 使用总结and 关联查询 and 按照子对象查询 o9o 1. Criteria,,Criterion ,, 1 <2. 主要的对象黑头配置磊 ...

  6. Tamper Data

    一款可以修改表单的火狐浏览器插件

  7. Leetcode 189 Rotate Array stl

    题意:将数组旋转k次,如将数组[1,2,3,4,5]旋转1次得到[2,3,4,5,1],将数组[1,2,3,4,5]旋转2次得到[3,4,5,1,2]..... 本质是将数组分成两部分a1,a2,.. ...

  8. WizardDialog 进度条使用记录

    开发RCP的朋友们经常会使用到导航窗口, 先简单介绍一下wizardDialog,基本上他的使用方法是这样的 首先有一个WizardDialog,在dialog里面需要放一个Wizard来控制页面Wi ...

  9. 重学JAVA基础(八):锁的基本知识

    1.线程状态 如上图,当我们新建一个线程,并start后,其实不一定会马上执行,因为只有操作系统调度了我们的线程,才能真正进行执行,而操作系统也随时可以运行其他线程,这时线程又回到可运行状态.这个过程 ...

  10. python的反射

    目前大多数网站都是通过路由的方法来,处理url请求,如果有很多个url的话,不停的include或者用if判断匹配,似乎不太符合情理,因此这里讲讲python的反射机制, 自动装在模块.请看下面的实例 ...