HTML5 image rotation,
HTML5 image rotation
First we use the Cococs2dx-Js-Lite version to create a project, the development environment we need is as follows:
1. webstrom
2. google chrome
3, cocos2dx-Js-Lite engine can also use cocos2d-Js!
Step 1:
Let's Cocos2dx-Js-Lite to create a project;
We only need to copy the three files to our project directory folder;
After the copy, the root directory is as follows:
Then we create two path folders in our webstrom, res (storing image resources) and src (storing js Code)
Then, let's change the code in index.html:
Index.html
<!DOCTYPE html>Step 2:
We need to create a layer MainLayer. js, create this layer and add it to our MyScene
Upload the example logo.png in our res!
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 (); // create an image var Logo = cc. sprite. create ("res/logo.png"); Logo. attr ({x: basesize. width/2, y: basesize. height/2}); this. addChild (Logo); // create a rotation action, cc. rotateBy to rotate var action_rotate = cc. rotateBy (1,-360); Logo. runAction (cc. repeatForever (action_rotate ));}});
We used cc. Sprite. create to create an image genie.Then use cc. rotateBy to create a rotation action.
Finally, let the image be rotated.
Step 3:
Add our MainLayer. js path to the jslist array in our project. json configuration file.
{ "debugMode" : 1, "frameRate" : 60, "id" : "gameCanvas", "renderMode" : 1, "jsList" : [ "src/MainLayer.js" ]}Click our index.html on the right to test our image rotation function!
The effect is as follows:
Download source code:
Baidu disk download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
