16 HTML5 Canvas应用-福州大学城社区

16 HTML5 Canvas应用网页前端/web开发工程师

/ 福建工程学院传播学院网页前端/web开发工程师 / 2016-08-08

前端,HTML5

一.认识createJS

代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px"></canvas>
<script src="index_02.js"></script>
</body>
</html>

/**
  * Created by Administrator on 2016/8/5.
  */
 var canvas;
 var stage;
 var txt;
 var count=0;
 window.onload=function()
 {
     canvas=document.getElementById("myCanvas");
     stage=new createjs.Stage(canvas);
     txt=new createjs.Text("number->","20px Arial","#ff7700");
     stage.addChild(txt);
     createjs.Ticker.setFPS(30);
     createjs.Ticker.addEventListener("tick",tick);
 }
 
 function tick(e)
 {
     count++;
     txt.text="number->"+count+"!";
     stage.update();
 }

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

代码示例：

<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="easeljs-0.8.2.min.js"></script>
 
 </head>
 <body>
 <canvas id="canvas" width="1000px" height="500px"></canvas>
 <script src="index_02.js"></script>
 </body>
 </html>

/**
  * Created by Administrator on 2016/8/5.
  */
 var stage;
 var canvas;
 var img= new Image();
 var sprite;
 window.onload = function()
 {
     canvas=document.getElementById("canvas");
     stage = new createjs.Stage(canvas);
 
     stage.addEventListener("stagemousedown",clickCanvas);
     stage.addEventListener("stagemousemove",moveCanvas);
 
     var data={
         images:["3.png"],
         frames:{width:20,height:20,regX:10,regY:10}
     }
 
     sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
     createjs.Ticker.setFPS(20);
     createjs.Ticker.addEventListener("tick",tick);
 }
 
 function tick(e)
 {
     var t=stage.getNumChildren();
     for(var i=t-1;i>0;i--)
     {
         var s=stage.getChildAt(i);
 
         s.vY+=2;
         s.vX+=1;
         s.x+= s.vX;
         s.y+= s.vY;
 
         s.scaleX= s.scaleY= s.scaleX+ s.vS;
         s.alpha += s.vA;
         if(s.alpha<=0|| s.y>canvas.height)
         {
             stage.removeChildAt(i);
         }
     }
     stage.update(e);
 }
 
 function clickCanvas(e)
 {
     addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);
 }
 function moveCanvas(e)
 {
     addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1);
 }
 function addS(count,x,y,speed)
 {
     for(var i=0;i<count;i++)
     {
         var s=sprite.clone();
         s.x=x;
         s.y=y;
         s.alpha=Math.random()*0.5+0.5;
         s.scaleX= s.scaleY=Math.random()+0.3;
 
         var a =Math.PI*2*Math.random();
         var v= (Math.random()-0.5)*30*speed;
         s.vX =Math.cos(a)*v;
         s.vY =Math.sin(a)*v;
         s.vS =(Math.random()-0.5)*0.2;
         s.vA = -Math.random()*0.05-0.01;
         stage.addChild(s);
     }
 }

前端,HTML5

Act师大校友联盟

1914篇文章

大家好，我是小明，请多多指教！

16 HTML5 Canvas应用网页前端/web开发工程师

最近内容