今天闲来无事，复习下数学公式，直角坐标系中的，计算圆的x，y坐标
- 勾股定理
let deg = (2*Math.PI/360)*stars[i]['deg'];
let x = point.x + Math.sin(hd)*r;
let y = point.y + Math.cos(hd)*r;
demo地址 http://works.ibeeger.com/solar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>太阳系</title>
<style>
*{margin: 0; padding: 0}
html,body{
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
(function(){
var cs = document.querySelector('canvas');
var ctx = cs.getContext('2d');
cs.width = window.innerWidth;
cs.height = window.innerHeight;
var r = 50, degstep = 0;
ctx.lineWidth = 0.8;
ctx.font = '14px sans-serif'
const point = {x:window.innerWidth/2,y:window.innerHeight/2};
var deg = 0;
var isstart = true;
cs.addEventListener('mousemove', function(e){
point.x = e.offsetX;
point.y = e.offsetY;
}, false);
// 水星、金星、地球、火星、木星、土星、天王星和海王星
const stars = [{
name:'太阳'
},{
name:'水星',
speed:4.1,
size: 5,
deg: -29,
color:'255, 0, 0'
},{
name:'金星',
speed:1.6,
size: 10,
deg: -69,
color:'255, 165, 0'
},{
name:'地球',
speed:1,
size: 13,
deg: -129,
color: '0, 255, 0'
},{
name:'火星',
speed:0.5,
size: 8,
deg: -99,
color:'255, 255, 0'
},{
name:'木星',
speed:0.09,
size: 24,
deg: -229,
color:'0, 127, 255'
},{
name:'土星',
speed:0.03,
size: 20,
deg: -289,
color: '0, 0, 255'
},{
name:'天王星',
speed:0.01,
size: 18,
deg: -20,
color:'139, 0, 255'
},{
name:'海王星',
speed:0.006,
size: 17,
deg: -300,
color: '222,33,22'
}];
drawLine()
function drawLine() {
ctx.clearRect(0,0,window.innerWidth,window.innerHeight)
// ctx.lineTo(x, y);
// ctx.stroke();
for(let i =1; i<stars.length; i++) {
const _r = (i*30+r);
ctx.save();
ctx.beginPath()
ctx.strokeStyle = '#999'
ctx.arc(point.x, point.y, _r, 0, Math.PI*2, true);
ctx.closePath();
ctx.stroke();
ctx.save();
let hd = (2*Math.PI/360)*stars[i]['deg'];
let x = point.x + Math.sin(hd)*_r;
let y = point.y + Math.cos(hd)*_r;
ctx.beginPath();
ctx.arc(x,y,stars[i]['size'], 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle= 'rgb('+stars[i]['color']+')';
ctx.fill();
ctx.fillStyle='#000';
ctx.fillText(stars[i]['name'],x-(stars[i]['name'].length*15/2),y+5);
ctx.save();
if(stars[i]['deg']==-360 || !stars[i]['deg']){
stars[i]['deg']=0;
}
stars[i]['deg']-= stars[i]['speed']
}
requestAnimationFrame(drawLine)
}
})()
</script>
</body>
</html>