html5 canvas纸飞机跟随鼠标飞行动画
简要教程
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画。插件中使用了paper.js来构建场景中的各种元素。 HTMLhtml结构只需要一个canvas,并给它一个id triangle-lost-in-space。
<canvasid="triangle-lost-in-space"resize="true"></canvas> JAVASCRIPT
varSQRT_3 = Math.pow(3, 0.5); vartriangle, D, mousePos, position; varcount = 50; window.onload =function() { paper.setup('triangle-lost-in-space'); D = Math.max(paper.view.getSize().width, paper.view.getSize().height); mousePos = paper.view.center.add([view.bounds.width / 3, 100]); position = paper.view.center; // 画背景 varbackground =newPath.Rectangle(view.bounds); background.fillColor ='#3B3251'; buildStars(); triangle =newTriangle(50); paper.view.draw(); paper.view.onFrame =function(event) { position = position.add( (mousePos.subtract(position).divide(10) ) ); varvector = (view.center.subtract(position)).divide(10); moveStars(vector.multiply(3)); triangle.update(); }; }; // --------------------------------------------------- // Helpers // --------------------------------------------------- window.onresize =function() { project.clear(); D = Math.max(paper.view.getSize().width, paper.view.getSize().height); // Draw the BG varbackground =newPath.Rectangle(view.bounds); background.fillColor ='#3B3251'; buildStars(); triangle.build(50); }; varrandom =function(minimum, maximum) { returnMath.round(Math.random() * (maximum - minimum) + minimum); }; varmap =function(n, start1, stop1, start2, stop2) { return(n - start1) / (stop1 - start1) * (stop2 - start2) + start2; }; // --------------------------------------------------- // Triangle // --------------------------------------------------- varTriangle =function(a) { this.build(a); }; Triangle.prototype.build =function(a) { // The points of the triangle varsegments = [newpaper.Point(0, -a / SQRT_3), newpaper.Point(-a/2, a * 0.5 / SQRT_3), newpaper.Point(a/2, a * 0.5 / SQRT_3)]; this.flameSize = a / SQRT_3; varflameSegments = [newpaper.Point(0,this.flameSize), newpaper.Point(-a/3, a * 0.4 / SQRT_3), newpaper.Point(a/3, a * 0.4 / SQRT_3)]; this.flame =newPath({ segments: flameSegments, closed:true, fillColor:'#FCE589' }); this.ship =newPath({ segments: segments, closed:true, fillColor:'#FF7885' }); this.group =newGroup({ children: [this.flame,this.ship], position: view.center }); }; Triangle.prototype.update =function() { this.flame.segments[0].point.x = random(this.flame.segments[1].point.x,this.flame.segments[2].point.x); vardist = mousePos.subtract(paper.view.center).length; varangle = mousePos.subtract(paper.view.center).angle; varspread = map(dist, 0, D/2, 10, 30); this.flame.segments[0].point = paper.view.center.subtract(newPoint({ length: map(dist, 0, D/2, 2*this.flameSize/3,this.flameSize), angle: random(angle - spread, angle + spread) })); }; Triangle.prototype.rotate =function() { varangle = paper.view.center.subtract(mousePos).angle - paper.view.center.subtract(this.ship.segments[0].point).angle; this.group.rotate(angle, paper.view.center); }; // --------------------------------------------------- // 星星 (from paperjs.org examples section) // --------------------------------------------------- window.onmousemove =function(event) { mousePos.x = event.x; mousePos.y = event.y; triangle.rotate(); }; varbuildStars =function() { // Create a symbol, which we will use to place instances of later: varpath =newPath.Circle({ center: [0, 0], radius: 5, fillColor:'white', strokeColor:'white' }); varsymbol =newSymbol(path); // Place the instances of the symbol: for(vari = 0; i < count; i++) { // The center position is a random point in the view: varcenter = Point.random().multiply(paper.view.size); varplaced = symbol.place(center); placed.scale(i / count + 0.01); placed.data = { vector:newPoint({ angle: Math.random() * 360, length : (i / count) * Math.random() / 5 }) }; } varvector =newPoint({ angle: 45, length: 0 }); }; varkeepInView =function(item) { varposition = item.position; varviewBounds = paper.view.bounds; if(position.isInside(viewBounds)) return; varitemBounds = item.bounds; if(position.x > viewBounds.width + 5) { position.x = -item.bounds.width; } if(position.x < -itemBounds.width - 5) { position.x = viewBounds.width; } if(position.y > viewBounds.height + 5) { position.y = -itemBounds.height; } if(position.y < -itemBounds.height - 5) { position.y = viewBounds.height } }; varmoveStars =function(vector) { // Run through the active layer's children list and change // the position of the placed symbols: varlayer = project.activeLayer; for(vari = 1; i < count + 1; i++) { varitem = layer.children[i]; varsize = item.bounds.size; varlength = vector.length / 10 * size.width / 10; item.position = item.position.add( vector.normalize(length).add(item.data.vector)); keepInView(item); } }; |