<!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>Canvas 带圆晕边缘的星球平面图</title>
<style>
body {
background: black;
}
</style>
</head>
<body>
<canvas id="c" width="1200" height="500"></canvas>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
function mkGradient(opts) {
opts.ctx.rect(0, 0, opts.r2 * 2, opts.r2 * 2);
var g = opts.ctx.createRadialGradient(opts.x || opts.r2, opts.x || opts.r2, opts.r1, opts.x || opts.r2, opts.x || opts.r2, opts.r2);
g.addColorStop(0, opts.c1);
g.addColorStop(1, opts.c2);
opts.ctx.fillStyle = g;
opts.ctx.fill();
}
function mkPlanet(opts) {
var canvas = document.createElement('canvas');
canvas.width = opts.r * 2.4;
canvas.height = opts.r * 2.4;
var ctx = canvas.getContext('2d');
// Halo
mkGradient({
ctx: ctx,
r1: opts.r,
r2: opts.r * 1.2,
c1: opts.h1,
c2: opts.h2
});
// Translate to edge of halo.
var offset = opts.r * 1.2 - opts.r;
ctx.translate(offset, offset);
/// Create planet outline clip
ctx.beginPath();
ctx.arc(opts.r, opts.r, opts.r, 0, 2 * Math.PI);
ctx.closePath();
ctx.clip();
// Fill the ocean
mkGradient({
ctx: ctx,
r1: 0,
r2: opts.r,
c1: opts.o2,
c2: opts.o1
});
// Add some continents
for (var i = 0; i < opts.r; i++) {
ctx.globalAlpha = .8;
var x = Math.random() * opts.r * 2;
var y = Math.random() * opts.r * 2
ctx.beginPath();
ctx.arc(x, y, Math.random() * (opts.r / 5), 0, 2 * Math.PI);
ctx.fillStyle = i > opts.r / 2 ? opts.c3 : opts.c2;
ctx.fill();
}
ctx.globalAlpha = 1;
// Add some atmosphere
mkGradient({
ctx: ctx,
r1: opts.r / 2,
r2: opts.r,
c1: 'rgba(255,255,255,0)',
c2: 'rgba(255,255,255,.5)'
});
if (!opts.radiant) {
mkGradient({
ctx: ctx,
r1: opts.r * 1.3,
r2: opts.r * 2,
c1: 'rgba(0,0,0,0)',
c2: 'rgba(0,0,0,.8)',
x: -opts.r / 8
});
}
return canvas;
}
var earth = mkPlanet({
r: 100,
o1: '#0d76b8', // ocean 1
o2: '#48b8fb', // ocean color 2
c2: '#156b15', // land color 1
c3: '#1C7D1C', // land color 2
h1: '#48d6f9', // halo color 1
h2: 'rgba(134,59,249,0)' // halo color 2
});
var europa = mkPlanet({
r: 50,
o1: '#315A9E',
o2: '#113A7D',
c2: '#E1ECFF',
c3: '#F2F7FF',
h1: 'rgba(255,255,255,.5)',
h2: 'rgba(134,59,249,0)'
});
var mars = mkPlanet({
r: 90,
o1: '#621100',
o2: '#723F36',
c2: '#FF2F00',
c3: '#BD2200',
h1: 'rgba(255,122,0,.8)',
h2: 'rgba(255,12,0,0)'
});
var sun = mkPlanet({
r: 200,
o1: '#FFF500',
o2: '#FFE300',
c2: '#FFC700',
c3: '#FFAF00',
h1: 'rgba(255,122,0,1)',
h2: 'rgba(255,12,0,0)',
radiant: true
});
ctx.drawImage(sun, 0, 0);
ctx.drawImage(earth, 500, 120);
ctx.drawImage(mars, 750, 130);
ctx.drawImage(europa, 1000, 180);
</script>
</body>
</html>
