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. 从0开始学Swift笔记整理（一）

    Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代 ...

  2. 替换系统数据库解决SQLSERVER服务启动不了的问题

    替换系统数据库解决SQLSERVER服务启动不了的问题 当遇到SQLSERVER服务启动不起来的时候,我们试过把系统的四个数据库master ,model ,tempdb,msdb 替换掉,Windo ...

  3. 从“程序员转行卖烧饼”想到IT人创业

    我的一个朋友最近总在跟我念叨着“我不想做开发了,整天累死累活写程序,也攒不下几个钱.我想辞职搞点啥!” 我问他:“你想搞点啥?”. 他说:“搞啥都比做开发强,做个网站赚广告费,接私活……实在不行我去卖 ...

  4. ubuntu apache2 wsgi 部署django

    入题 分为如下几步 1.安装python 2.安装django 3.安装wsgi,如有问题请参照上一篇 ubuntu 编译安装 mod_wsgi 4.与apache集成这里主要讲这部分 环境apach ...

  5. 说不尽的MVVM(1) – Why MVVM

    最近学的一篇课文<说不尽的狗>竟让我有了写<说不尽的MVVM>这一想法,事非亵渎,实出无奈.我在刚学WPF不久时听说有MVVM这种东西,做了下尝试,发现他能给程序的设计带来很大 ...

  6. mac下缺乏make wget怎么办？

    1.下载command Line tools for Xcode http://www.mkyong.com/mac/how-to-install-gcc-compiler-on-mac-os-x/ ...

  7. atitit.404错误的排查流程总结vOa6

    atitit.404错误的排查流程总结vOa6 1. 场景 1 1.1. 子应用猛个腊擦不能使用  404 兰.. 1 2. 服务器配置问题 2 2.1. 登录服务器管理子应用,查看应用是否启动okk ...

  8. paip.uapi 获取网络url内容html 的方法java php ahk c++ python总结.

    paip.uapi 获取网络url内容html 的方法java php ahk c++ python总结. 各种语言总结比较,脚本php.python果然是方便.简短,实用. uapi : get_w ...

  9. hud2544dijkstra+堆优化

    该算法对于稠密图更加有效: 对于给出具有非负权重的边和源顶点S的图G,算法可在O(mlogn)时间内找出从s点到其他每一个顶点的距离. 如果图是稠密的,即对于某个ε>0,m>=n^(1+ε ...

  10. android: 使用通知

    8.1   使用通知 通知(Notification)是 Android 系统中比较有特色的一个功能,当某个应用程序希望向 用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助通知来实现.发 ...