<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 Canvas绘制地球大陆轮廓图</title>
<style>
body {
background-color: #111;
overflow: hidden;
}
canvas {
position: absolute;
top: calc( 50% - 200px);
left: calc( 50% - 200px);
}
/* temporary */
/*
img {
position: absolute;
bottom: -6px;
right: -12px;
}
body {
color: #eee;
}
.debug-canvas {
position: absolute;
top: auto;
left: auto;
bottom: 0;
right: 0;
}*/
</style>
</head>
<body>
<canvas id=c></canvas>
<script>
var s = c.width = c.height = 400,
ctx = c.getContext('2d'),
opts = {
globeRadius: 150,
depth: 300,
focalLength: 300,
center: s / 2,
rotYVel: .01,
baseXRot: -0.41, // 23.5 deg
afterYRot: -2, //Math.PI / 2,
},
rot = {
y: {
cos: Math.cos(opts.rotYVel),
sin: Math.sin(opts.rotYVel)
},
z: {
cos: Math.cos(opts.baseXRot),
sin: Math.sin(opts.baseXRot)
},
ay: {
cos: Math.cos(opts.afterYRot),
sin: Math.sin(opts.afterYRot)
}
};
function anim() {
window.requestAnimationFrame(anim);
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, s, s);
ctx.strokeStyle = '#2b2';
ctx.beginPath();
for (var i = 0; i < lines.length; ++i) {
var points = lines[i];
for (var j = 0; j < points.length; ++j) {
var point = points[j],
x = point.x,
y = point.y,
z = point.z;
var X = x;
x = x * rot.y.cos - z * rot.y.sin;
z = z * rot.y.cos + X * rot.y.sin;
point.x = x;
point.z = z;
var Y = y;
y = y * rot.z.cos - x * rot.z.sin;
x = x * rot.z.cos + Y * rot.z.sin;
X = x;
x = x * rot.ay.cos - z * rot.ay.sin;
z = z * rot.ay.cos + X * rot.ay.sin;
z += opts.depth;
var scale = opts.focalLength / z,
sx = opts.center + scale * x,
sy = opts.center + scale * y;
point.sx = sx;
point.sy = sy;
//if( z < opts.depth )
ctx[j === 0 ? 'moveTo' : 'lineTo'](sx, sy);
}
// to prevent it from recalculating position of starting point twice but still closing the path
//if( points[ 0 ].z < opts.depth )
ctx.lineTo(points[0].sx, points[0].sy);
}
ctx.stroke();
//ctx.fillStyle = 'green';
//ctx.fill();
};
function reparseLines() {
// the lines will just have indications for angles
for (var i = 0; i < lines.length; ++i) {
var points = [];
for (var j = 0; j < lines[i].length; j += 2) {
var sinA = Math.sin(lines[i][j] * Math.PI),
cosA = Math.cos(lines[i][j] * Math.PI),
sinB = Math.sin(lines[i][j + 1] * Math.PI / 2),
cosB = Math.cos(lines[i][j + 1] * Math.PI / 2);
points.push({
x: opts.globeRadius * cosA * cosB,
y: opts.globeRadius * sinB,
z: opts.globeRadius * sinA * cosB
});
}
lines[i] = points;
}
}
// each point is 2 angles in half turns
// a, x[-1,1] = vertical circle
// x[-1,1], .5 = equator
// x[-1,1], a = parallel cirles at a
var lines = [
// africa main continent
[-.04, -.05,
.01, -.05,
.02, -.07,
.06, -.03,
.05, .03,
.08, .12,
.06, .18,
.08, .25,
.10, .35,
.10, .39,
.15, .37,
.18, .33,
.17, .28,
.19, .28,
.19, .23,
.22, .19,
.22, .06,
.27, -.033,
.29, -.15,
.23, -.13,
.175, -.33,
.12, -.36,
.1, -.32,
.06, -.36,
.06, -.405,
.01, -.39, -.03, -.38, -.05, -.35, -.08, -.28, -.08, -.205, -.088, -.15,
],
// madagascar
[0.245, 0.192, 0.245, 0.233, 0.241, 0.267, 0.249, 0.3, 0.266, 0.275, 0.287, 0.175, 0.274, 0.142],
// antarctica
[-0.984, 0.892, -0.918, 0.875, -0.748, 0.825, -0.662, 0.817, -0.559, 0.842, -0.559, 0.792, -0.46, 0.825, -0.402, 0.825, -0.414, 0.775, -0.311, 0.692, -0.328, 0.75, -0.324, 0.808, -0.34, 0.825, -0.233, 0.883, -0.023, 0.783, 0.196, 0.783, 0.237, 0.75, 0.254, 0.758, 0.287, 0.725, 0.414, 0.767, 0.464, 0.733, 0.48, 0.733, 0.489, 0.783, 0.505, 0.717, 0.551, 0.725, 0.6, 0.742, 0.625, 0.717, 0.645, 0.758, 0.72, 0.758, 0.79, 0.742, 0.934, 0.783, 0.909, 0.833, 0.922, 0.867],
// south america
[-0.427, -0.067, -0.39, -0.142, -0.373, -0.108, -0.373, -0.083, -0.332, -0.125, -0.291, -0.067, -0.282, -0.008, -0.188, 0.075, -0.192, 0.108, -0.212, 0.133, -0.208, 0.217, -0.229, 0.258, -0.254, 0.258, -0.262, 0.283, -0.262, 0.333, -0.287, 0.383, -0.303, 0.383, -0.303, 0.425, -0.336, 0.433, -0.348, 0.458, -0.344, 0.475, -0.369, 0.5, -0.361, 0.525, -0.373, 0.55, -0.357, 0.6, -0.394, 0.6, -0.402, 0.542, -0.394, 0.492, -0.41, 0.433, -0.394, 0.392, -0.406, 0.35, -0.39, 0.308, -0.39, 0.25, -0.381, 0.225, -0.419, 0.15, -0.419, 0.1, -0.456, 0.058, -0.435, 0.025, -0.435, -0.008, -0.427, -0.008, -0.427, -0.058],
// that south american island in the south
[-0.336, 0.575, -0.307, 0.575, -0.311, 0.6, -0.328, 0.6],
// north 'murica
[-0.435, -0.067, -0.456, -0.075, -0.493, -0.15, -0.505, -0.15, -0.526, -0.192, -0.571, -0.192, -0.629, -0.358, -0.604, -0.258, -0.641, -0.308, -0.641, -0.333, -0.687, -0.45, -0.674, -0.533, -0.707, -0.6, -0.72, -0.575, -0.736, -0.617, -0.814, -0.692, -0.847, -0.625, -0.889, -0.608, -0.893, -0.658, -0.905, -0.675, -0.905, -0.717, -0.88, -0.733, -0.909, -0.742, -0.946, -0.742, -0.975, -0.775, -0.955, -0.792, -0.926, -0.758, -0.893, -0.792, -0.703, -0.792, -0.654, -0.808, -0.621, -0.75, -0.522, -0.758, -0.497, -0.792, -0.456, -0.775, -0.39, -0.725, -0.472, -0.75, -0.431, -0.708, -0.476, -0.708, -0.513, -0.667, -0.456, -0.625, -0.435, -0.55, -0.435, -0.617, -0.414, -0.617, -0.435, -0.7, -0.406, -0.7, -0.377, -0.642, -0.353, -0.675, -0.307, -0.592, -0.307, -0.558, -0.373, -0.567, -0.291, -0.55, -0.282, -0.525, -0.344, -0.492, -0.353, -0.517, -0.402, -0.45, -0.419, -0.392, -0.435, -0.35, -0.427, -0.275, -0.447, -0.283, -0.472, -0.333, -0.48, -0.325, -0.526, -0.325, -0.53, -0.233, -0.493, -0.2, -0.485, -0.225, -0.468, -0.225, -0.48, -0.2, -0.468, -0.167, -0.452, -0.167, -0.452, -0.108],
// cuba
[-0.464, -0.242, -0.443, -0.25, -0.41, -0.233, -0.414, -0.2, -0.435, -0.242],
// greenland
[-0.373, -0.883, -0.365, -0.833, -0.32, -0.85, -0.282, -0.783, -0.295, -0.758, -0.262, -0.667, -0.229, -0.667, -0.229, -0.708, -0.208, -0.742, -0.163, -0.767, -0.113, -0.8, -0.105, -0.825, -0.093, -0.883, -0.064, -0.917, -0.13, -0.917, -0.204, -0.942, -0.282, -0.917, -0.353, -0.917],
// iceland
[-0.134, -0.742, -0.093, -0.733, -0.08, -0.7, -0.089, -0.683, -0.118, -0.683, -0.13, -0.708],
// eurasia
[-0.006, -0.492, -0.043, -0.475, -0.047, -0.408, -0.035, -0.408, -0.023, -0.4, -0.006, -0.425, 0.014, -0.458, 0.014, -0.475, 0.052, -0.483, 0.072, -0.458, 0.093, -0.442, 0.093, -0.417, 0.101, -0.425, 0.105, -0.425, 0.085, -0.467, 0.072, -0.492, 0.072, -0.5, 0.08, -0.5, 0.113, -0.458, 0.113, -0.442, 0.126, -0.4, 0.134, -0.433, 0.134, -0.45, 0.155, -0.45, 0.159, -0.4, 0.171, -0.4, 0.184, -0.417, 0.188, -0.375, 0.2, -0.408, 0.204, -0.4, 0.2, -0.367, 0.188, -0.342, 0.221, -0.225, 0.241, -0.183, 0.237, -0.15, 0.266, -0.158, 0.311, -0.2, 0.332, -0.242, 0.311, -0.275, 0.299, -0.258, 0.278, -0.308, 0.278, -0.325, 0.299,
html5 Canvas绘制的地球大陆轮廓图动画特效源码.zip
版权申诉
23 浏览量
2022-11-02
23:56:42
上传
评论
收藏 4KB ZIP 举报
html5 Canvas绘制的地球大陆轮廓图动画特效源码.zip （1个子文件） 
132692082072988475 
index.html 12KB资源评论
易小侠
- 粉丝: 6469
- 资源: 9万+
最新资源
- elasticsearch-spring-boot-starter.7z
- Anti-Cheat Toolkit 2023 v2023.2.5
- 使用堆栈数据结构解迷宫问题
- SoftFloat-3e.zip
- Easy Save - 3.5.6
- 基于tensorflow的目标检测系统源码+部署教程文档+全部数据+训练好的模型（高分项目）
- 基于Python皮肤电信号的情绪识别算法源码+模型+PPT+详细文档+全部数据资料.zip
- 基于Python皮肤电信号的情绪识别算法源码+模型+PPT+详细文档+全部数据资料.zip
- 区块链毕业设计 基于区块链的慈善募捐平台的智能合约源码+详细文档+全部资料（高分项目）.zip
- 区块链毕业设计 基于区块链的慈善募捐平台的智能合约源码+详细文档+全部资料（高分项目）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
