[html5] 学习笔记-Canvas应用

通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互。

1、认识CreateJS

CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形。

官网:http://createjs.com/

 1 <html>
 2 <head>
 3     <title></title>
 4     <script src="easeljs-0.8.2.min.js"></script>
 5 </head>
 6 <body>
 7     <canvas id="canvas" width="500" height="500"></canvas>
 8     <script src="app.js"></script>
 9 </body>
10 </html>

其中用到的app.js:

 1 var canvas;
 2 var stage;
 3 var txt;
 4 var count=0;
 5 window.onload = function() {
 6     canvas = document.getElementById("canvas");
 7     stage = new createjs.Stage(canvas);
 8 
 9     txt = new createjs.Text("number->","20px Arial","#ff7700");
10     stage.addChild(txt);
11 
12     createjs.Ticker.setFPS(30);
13     createjs.Ticker.addEventListener("tick",tick);
14 }
15 function tick(e){
16     count++;
17     txt.text="number->"+count+"!";
18     stage.update();
19 }

工程中添加了CreatJS中的easeljs-0.8.2.min.js。

 

2、使用Canvas制作炫酷的效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="easeljs-0.8.2.min.js"></script>
 7 </head>
 8 <body>
 9 <canvas id="canvas" width="1000px" height="500px"></canvas>
10 <script src="app.js"></script>
11 </body>
12 </html>

 

其中用到的app.js

 1 /**
 2  * Created by wwtliu on 14/8/11.
 3  */
 4 var canvas;
 5 var stage;
 6 var img = new Image();
 7 var sprite;
 8 
 9 window.onload = function(){
10     canvas = document.getElementById("canvas");
11     stage = new createjs.Stage(canvas);
12 
13     stage.addEventListener("stagemousedown",clickCanvas);
14     stage.addEventListener("stagemousemove",moveCanvas);
15 
16     var data={
17         images:["2.png"],
18         frames:{width:20,height:20,regX:10,regY:10}
19     }
20 
21     sprite  = new createjs.Sprite(new createjs.SpriteSheet(data));
22     createjs.Ticker.setFPS(20);
23     createjs.Ticker.addEventListener("tick",tick);
24 }
25 function tick(e){
26     var t = stage.getNumChildren();
27     for(var i = t-1;i>0;i--){
28         var s = stage.getChildAt(i);
29 
30         s.vY +=2;
31         s.vX +=1;
32         s.x += s.vX;
33         s.y += s.vY;
34 
35         s.scaleX = s.scaleY =s.scaleX+ s.vS;
36         s.alpha += s.vA;
37 
38         if(s.alpha <= 0 || s.y >canvas.height){
39             stage.removeChildAt(i);
40         }
41     }
42     stage.update(e);
43 }
44 
45 function clickCanvas(e){
46     addS(Math.random()*200 + 100,stage.mouseX,stage.mouseY,2);
47 }
48 
49 function moveCanvas(e){
50     addS(Math.random()*2 + 1,stage.mouseX,stage.mouseY,1);
51 }
52 
53 function addS(count,x,y,speed){
54     for(var i = 0;i<count;i++){
55         var s = sprite.clone();
56         s.x = x;
57         s.y = y;
58         s.alpha = Math.random()*0.5 + 0.5;
59         s.scaleX = s.scaleY = Math.random() +0.3;
60 
61         var a = Math.PI * 2 *Math.random();
62         var v = (Math.random() - 0.5) *30 *speed;
63         s.vX = Math.cos(a) *v;
64         s.vY = Math.sin(a) *v;
65         s.vS = (Math.random() - 0.5) *0.2; // scale
66         s.vA = -Math.random() *0.05 -0.01; // alpha
67         stage.addChild(s);
68     }
69 }

 

工程中添加了CreatJS中的easeljs-0.8.2.min.js。

你可能感兴趣的:([html5] 学习笔记-Canvas应用)