html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画

这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画。插件中使用了paper.js来构建场景中的各种元素。

HTML

html结构只需要一个canvas，并给它一个id triangle-lost-in-space。

JAVASCRIPT

var SQRT_3 = Math.pow(3, 0.5);

var triangle, D, mousePos, position;

var count = 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;

// 画背景

var background = new Path.Rectangle(view.bounds);

background.fillColor = '#3B3251';

buildStars();

triangle = new Triangle(50);

paper.view.draw();

paper.view.onFrame = function(event) {

position = position.add( (mousePos.subtract(position).divide(10) ) );

var vector = (view.center.subtract(position)).divide(10);

moveStars(vector.multiply(3));

triangle.update();

};

};

// ---------------------------------------------------

// Helpers

// ---------------------------------------------------

window.onresize = function