canvas圓的練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas畫圓</title>
<style>
canvas{
border: 1px solid #eee;
}
</style>
</head>
<body>
<canvas id="canvas">
您的浏覽器不支援canvas，請更換浏覽器觀看
</canvas>
<script>
var myCanvas = document.getElementById('canvas');
myCanvas.width = 600;
myCanvas.height = 600;
var context = myCanvas.getContext('2d');
context.font = '20px Microsorft YaHei';
context.lineWidth = 4;
context.strokeStyle = '#00b6ff';
function drawArc(x,y,bool,ant=false) {
let value = 10*x,
radius = 20,
centerX = (x - 1) * (2 * radius + 15) + 25;//1:20,2:70(20+50),3:120(20+50+50)
context.beginPath();
context.arc(centerX, y, radius, 0, value / 50 * Math.PI,ant);
if(bool)
context.closePath();
context.stroke();
}
/* 預設填充顔色-黑色 */
context.fillText('一、使用closePath， 口就會自動封閉',10,20);
for (let i = 1; i <= 10; i++) {
/* 使用closePath 口就會封閉*/
drawArc(i,50,true);
}
/* 使用漸變填充文字 */
var gradient = context.createLinearGradient(0,0, myCanvas.width,0);
gradient.addColorStop("0","#f00");
// gradient.addColorStop("0.5","#0f0");
gradient.addColorStop("1","#00f");
context.fillStyle = gradient;
context.fillText('二、不使用closePath關閉每個圓',10,120);
for (let i = 1; i <= 10; i++) {
/* 不使用closePath，口就不會封閉 */
drawArc(i,150,false);
}
context.fillText('三、逆時針效果，用來說明上下左右四個pi點是不變的',10,220);
context.fillText('順時針的0.5pi和逆時針時的0.5pi，都集中在一個點上。',10,250);
for (let i = 1; i <= 10; i++) {
/* 使用closePath，口就不會封閉 */
drawArc(i,280,true,true);
}
context.fillText('四、開口時可以更直覺看逆時針效果',10,350);
for (let i = 1; i <= 10; i++) {
/* 不使用closePath，口就不會封閉 */
drawArc(i,380,false,true);
}
context.fillText('逆時針的時候，0.5pi竟然是第一個趨近于整圓的狀态',10,420);
context.fillText('也就是0.5pi是一個地标的感覺，并不是弧長',10,450);
</script>
</body>
</html>
越努力，越幸運；阿門。