您的位置：首页 > 其它

Canvas_2

2016-07-06 21:23 120 查看

createjs的应用

绘制文本

代码：

Index.html

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

绘制静态文本

Canvas_2.js

var canvas,stage,txt;

window.onload=function(){
canvas=document.getElementById("canvas");
stage=new createjs.Stage(canvas);
txt=new createjs.Text("number->","20px Arial","#ff7700");
stage.addChild(txt);
createjs.Ticker.addEventListener("tick",stage);
}

绘制动态文本

var canvas,stage,txt;
var count=0;

window.onload=function(){
canvas=document.getElementById("canvas");
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();
}

鼠标点击，鼠标移动动画

var canvas,stage,sprite;
var img=new Image();

window.onload=function(){
canvas=document.getElementById("canvas");
stage=new createjs.Stage(canvas);

stage.addEventListener("stagemousedown",clickCanvas);
stage.addEventListener("stagemousemove",moveCanvas);

var data={
images: ["1.png"],
frames: {width: 21, height: 23, regX: 10, regY: 11}
};

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.vX+=2;
s.vY+=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();
}

function addS(count,x,y,speed){
for(var i=0;i<count;i++){
var s=sprite.clone();
//设置图形初始位置，透明度，大小
s.x=x;
s.y=y;
s.scaleX= s.scaleY=Math.random()+0.3;
s.alpha=Math.random()*0.5+0.5;

//设置图形每次变化的大小
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; // scale
s.vA = -Math.random() * 0.05 - 0.01; // alpha

stage.addChild(s);
}
}

function clickCanvas(e){
addS(Math.random() * 200 + 100 | 0,stage.mouseX,stage.mouseY,1);
}

function moveCanvas(e){
addS(Math.random() * 6 + 3 | 0,stage.mouseX,stage.mouseY,0.5);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 应用

相关文章推荐

新的分享

章节导航