Canvas动画：地球绕着太阳转
生活随笔
收集整理的這篇文章主要介紹了
Canvas动画：地球绕着太阳转
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
源碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Canvas動畫</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#000";
context.fillRect(0,0,800,600);
drawOutCircle(context)
var point = getPoint(200, 400, 300, 240);
var i = 0;
drawSmallCircle(context, point[i]);
setInterval(function() {
context.clearRect(10,10,780,580);
context.fillStyle = "#000";
context.fillRect(0,0,800,600);
drawOutCircle(context);
i++
if(i == 231) {
i = 0;
}
drawSmallCircle(context, point[i]);
}, 1000)
}
function drawOutCircle(context) {
context.strokeStyle = "white";
context.beginPath();
context.arc(400,300,200,0*Math.PI,2*Math.PI);
context.stroke();
context.fillStyle = "yellow";
context.beginPath();
context.arc(400,300,100,0*Math.PI,2*Math.PI);
context.fill();
context.font = "40px serif";
context.fillStyle = "black";
context.fillText('太',400-20,300+20);
}
function drawSmallCircle(context, coords) {
context.fillStyle = "blue";
context.beginPath();
context.arc(coords.x,coords.y,30,0*Math.PI,2*Math.PI);
context.fill();
context.font = "20px serif";
context.fillStyle = "black";
context.fillText('地',coords.x-10,coords.y+10);
}
function getPoint(r, ox, oy, count){
var point = [];
var radians = (Math.PI / 180) * Math.round(360 / count), //弧度
i = 0;
for(; i < count; i++){
var x = ox + r * Math.sin(radians * i),
y = oy + r * Math.cos(radians * i);
point.unshift({x:x,y:y}); //為保持數(shù)據(jù)順時針
}
return point;
}
</script>
</body>
</html>
View Code
效果圖：
學習資料：
1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
2、http://caibaojian.com/canvas/
總結(jié)
以上是生活随笔為你收集整理的Canvas动画：地球绕着太阳转的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果信用卡Apple Card怎么申请？
- 下一篇： Ftps搭建部署