用canvas画的圣诞树。

最新推荐文章于 2023-01-05 18:15:37 发布

weixin_30517001

最新推荐文章于 2023-01-05 18:15:37 发布

阅读量1.8k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/uamour/archive/2012/12/24/2830599.html

版权

明天圣诞节了。

于是乎就想起了圣诞树。

我用的是paperjs，和html5 canvas来实现。

直接看实例吧

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Merry Christmas!</title>
<script type="text/javascript" src='http://zgrossbart.github.com/Dandelion/paper.js'></script>
<script type="text/paperscript" canvas='mycanvas'>
var center = new Point(680, 80);
var points = 5;
var radius1 = 18;
var radius2 = 25;

var randColor = ['#F2385A','#F5A503','#E9F1DF','#4AD9D9','#36B1BF','#274C00','#7F9400','#D4D34D','#EDFFA9','#DB4646'];
var randText = ['☆','love','sj','rx','♥','◇','520','★',];

function getRandomNum(first,last){
    return Math.floor(Math.random()*(last-first+1)+first);
}
function charater(pos){
        var instance= new PointText(pos);
        instance.fontSize = 20;
        instance.content = randText[getRandomNum(0,7)];
        instance.fillColor = randColor[getRandomNum(0,9)];
        instance.rotate(Math.random()*360);
        instance.scale(0.5+Math.random()*0.5);
        instance.dest = new Point(getRandomNum(550,810),730);
        return instance;
}
function rotateMove(self,angle){
    if(self.position.y<450){
        var vector = self.dest - self.position;
        self.position.y += self.bounds.width/10;
        self.position.x += vector.x/50;
        self.rotate(angle);
        self.fillColor.hue +=3;
        //self.fillColor.alpha -=0.006;
    }else{
        self.remove();
    }
}
var group = new Group();
var gapTime = 30;
init(30);
function init(nameCount){
    for(var i=0;i<nameCount;i++){
        var ralmond = new charater(new Point(665,100));
        group.addChild(ralmond);
    }
}
function onFrame(event){
    for(var i=0;i<group.children.length;i++){
        rotateMove(group.children[i],5);
    }
    gapTime--;
    if(gapTime<0){
        init(5);
        gapTime = 10;
    } 

    
    star.rotate(3);
    star.fillColor.hue +=3
}
var star = new Path.Star(center, points, radius1, radius2);
star.fillColor = 'yellow';    
</script>
</head>
<body>
    <canvas id='mycanvas' resize></canvas>
</body>
</html>

转载于:https://www.cnblogs.com/uamour/archive/2012/12/24/2830599.html

weixin_30517001

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用canvas画的圣诞树。

明天圣诞节了。于是乎就想起了圣诞树。我用的是paperjs，和html5 canvas来实现。直接看实例吧<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Merry Christmas!</title>&...
复制链接

扫一扫