html实现平面地图效果,HTML5 光点组成的平面和立体世界地图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

! function() {

"use strict";

// main loop

function run() {

requestAnimationFrame(run);

pointer.ease(15);

ctx.clearRect(0, 0, canvas.width, canvas.height);

// flat world

for (var i = 0, n = points.length; i < n; i++) {

points[i].background();

}

// target

ctx.fillStyle = "#333";

ctx.fillRect(pointer.ex - 2, 0, 4, canvas.height);

ctx.fillRect(0, pointer.ey - 2, canvas.width, 4);

ctx.beginPath();

ctx.fillStyle = "#f00";

ctx.arc(pointer.ex, pointer.ey, 4, 0, Math.PI * 2);

ctx.fill();

// 3D globe

for (var i = 0; i < n; i++) {

points[i].globe();

}

}

// Point cons