用canvas画的圣诞树。
明天圣诞节了。
于是乎就想起了圣诞树。
我用的是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>