1. 讓canvas的坐標(biāo)系旋轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓周運(yùn)動</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//移動坐標(biāo)系,使旋轉(zhuǎn)中心點(diǎn)位于畫布中心
context.translate(200,200);
//畫小球
function draw(){
context.beginPath();
context.fillStyle = "red";
context.arc(100,100,10,0,Math.PI*2);
context.fill();
}
//讓坐標(biāo)系運(yùn)動
var everyPercent = Math.PI/100;
function act(){
context.clearRect(0,0,canvas.width,canvas.height);
context.rotate(everyPercent);
draw();
window.requestAnimationFrame(act);
}
act();
</script>
</html>
2. 畫一個空心圓，每次只畫圓的一小部分钉迷，每次清空畫布后改變圓的起始角度和終點(diǎn)角度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓周運(yùn)動2</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//移動坐標(biāo)系使旋轉(zhuǎn)中心點(diǎn)位于畫布中心
context.translate(200,200);
//畫小球
function draw(start,end){
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 10;
context.arc(0,0,100,start,end);
context.stroke();
}
var startPer = 0;
var everyPer = Math.PI/30;
function act(){
context.clearRect(-200,-200,canvas.width,canvas.height);
var endPer = startPer + everyPer;
draw(startPer,endPer);
window.requestAnimationFrame(act);
startPer = endPer;
}
act();
</script>
</html>
3. 利用勾股定理至非，定一個大圓，小球在該圓的軌跡上運(yùn)行糠聪。
原理：大圓半徑固定荒椭，根據(jù)每次改變的角度不同，可以算出小球的X,Y坐標(biāo)
?原理圖.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓周運(yùn)動3</title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//移動坐標(biāo)系使旋轉(zhuǎn)中心點(diǎn)位于畫布中心
context.translate(200,200);
//畫小球
function draw(everyPer){
var x = 100 * Math.cos(everyPer);
var y = 100 * Math.sin(everyPer);
context.beginPath();
context.fillStyle = "red";
context.arc(x,y,20,0,Math.PI*2);
context.fill();
}
var everyPer = 0;
function act(){
//清空畫布
context.clearRect(-200,-200,canvas.width,canvas.height);
draw(everyPer);
window.requestAnimationFrame(act);
everyPer += Math.PI/60;
}
act();
</script>
</html>
我的博客鏈接
更多資源就在我的gitHub：https://github.com/huzixian2017
