Canvas_2

最新推荐文章于 2021-02-04 16:39:49 发布

AndyJson

最新推荐文章于 2021-02-04 16:39:49 发布

阅读量275

点赞数

分类专栏： HTML5 文章标签： canvas 应用

本文链接：https://blog.csdn.net/AndyJson/article/details/51842453

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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);
}