热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5图片旋转

HTML5图片旋转首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下:1,webstrom2,googlechrome浏览器3,cocos2

HTML5图片旋转

首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下:

1,webstrom

2,google chrome浏览器

3,cocos2dx-Js-Lite 引擎 使用cocos2d-Js也可以!

第一步:

我们来进行Cocos2dx-Js-Lite来创建工程;

HTML5图片旋转

我们只需要拷贝这3个文件到我们的工程更目录文件夹中;

拷贝完之后我们根目录如下:

HTML5图片旋转

然后我们在我们webstrom中创建两个路径文件夹res(存放图片资源),src文件夹(存放js代码)

然后我们更改我们index.html里面的代码:

index.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图片旋转

源码下载:

百度盘下载

 

 

 

 

 

 

 

 

 

 

 
 

推荐阅读
  • ED Tree HDU4812 点分治+逆元
    这道题非常巧妙!!!我们进行点分治的时候,算出当前子节点的所有子树中的节点,到当前节点节点的儿子节点的距离,如下图意思就是当前节点的红色节点,我们要求出红色节点的儿子节点绿色节点, ... [详细]
  • 本文详细介绍了Python中的生成器表达式、列表推导式、字典推导式及集合推导式等,探讨了它们之间的差异,并提供了丰富的代码示例。 ... [详细]
  • 前端技术分享——利用Canvas绘制鼠标轨迹
    作为一名前端开发者,我已经积累了Vue、React、正则表达式、算法以及小程序等方面的技能,但Canvas一直是我的盲区。因此,我在2018年为自己设定了一个新的学习目标:掌握Canvas,特别是如何使用它来创建CSS3难以实现的动态效果。 ... [详细]
  • 本文探讨了在 PHP 的 Zend 框架下,使用 PHPUnit 进行单元测试时遇到的 Zend_Controller_Response_Exception 错误,并提供了解决方案。 ... [详细]
  • 本文详细介绍了在PHP中如何获取和处理HTTP头部信息,包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时,还探讨了PHP中$_SERVER变量的使用,以获取客户端和服务器的相关信息。 ... [详细]
  • 本文详细介绍了跨站脚本攻击(XSS)的基本概念、工作原理,并通过实际案例演示如何构建XSS漏洞的测试环境,以及探讨了XSS攻击的不同形式和防御策略。 ... [详细]
  • 本文档旨在提供C语言的基础知识概述,涵盖常量、变量、数据类型、控制结构及函数定义等内容。特别强调了常量的不同类型及其在程序中的应用,以及如何正确声明和使用函数。 ... [详细]
  • 探讨如何在给定数组中寻找一个连续子数组,使其和至少达到指定值s,同时确保子数组长度最短。 ... [详细]
  • 来自FallDream的博客,未经允许,请勿转载,谢谢。一天一套noi简直了.昨天勉强做完了noi2011今天教练又丢出来一套noi ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文详细介绍了在MyBatis框架中如何通过#和$两种方式来传递SQL查询参数。使用#方式可以提高执行效率,而使用$则有助于在复杂SQL语句中更好地查看日志。此外,文章还探讨了不同场景下的参数传递方法,包括实体对象、基本数据类型以及混合参数的使用。 ... [详细]
  • 题面:P3178[HAOI2015]树上操作好像其他人都嫌这道题太容易了懒得讲,好吧那我讲。题解:第一个操作和第二个操作本质上是一样的&# ... [详细]
  • 使用jQuery与百度地图API实现地址转经纬度功能
    本文详细介绍了如何利用jQuery和百度地图API将地址转换为经纬度,包括申请API密钥、页面构建及核心代码实现。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • 使用REM和媒体查询实现响应式布局
    本文介绍如何利用REM单位和媒体查询(Media Queries)来创建适应不同屏幕尺寸的网页布局。通过具体示例,展示在不同屏幕宽度下如何调整页面元素的样式。 ... [详细]
author-avatar
四年夏至_175
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有