canvas繪制圓形與12邊形（多邊形）時鐘
- 先看圓形時鐘
- 大致3個步驟
- 1.獲取畫布及內容，定義初始變數
- 2.封裝3個方法
- 3.畫時鐘，及封裝
- 12邊形時鐘
- 相對于圓形時鐘，12邊形剛好對應于時鐘的12個刻度，即我們僅需要改變一下外邊框（時鐘盤）和刻度微調即可
先看圓形時鐘
大致3個步驟
1.獲取畫布及內容，定義初始變數
//1
var canvas = document.querySelector('#cont');
//2 1,2步一般固定，除了1的畫布id獲取，2固定
var ctx = canvas.getContext('2d');
//3 定義基礎變數
var w = h = 400;//時鐘寬高
var x = y = 200;//時鐘中心坐標
var r = 180;//時鐘半徑
var r_hour = 60;//時針長度
var r_minute = 120;//分針長度
var r_secound = 140;//秒針長度
var r_text = 140;//定義表盤文字半徑
var r_square = 165;//刻度
var r_circle = 10;//表盤小圓點
var deg = 2 * Math.PI;//定義基本的四角
2.封裝3個方法
/*** 寫文字 */
function drawText(text, x, y) {
ctx.font = 'bold 26px 楷體';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}
/*** 畫直線*/
function drawLine(x1, y1, x2, y2, color, width) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//顏色
ctx.strokeStyle = color;
//線寬,不用單位
ctx.lineWidth = width;
ctx.lineCap = 'round';//變圓
ctx.stroke();
ctx.closePath();
}
/*** 畫圓 */
function drawCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
3.畫時鐘，及封裝
此時是我們的正式開始，又分為5步
最開始，我們要注意中心點移動
//平移中心點,x=y=0
ctx.translate(w / 2, h / 2);
第二步，開始時，我們是定死了三根針位置，沒有獲取到當前時間，獲取時間時注意三根針的半徑對應，否則可能出現針長度會變化，
//step1：畫圓盤
drawCircle(0, 0, r, '#fff');
//step2.畫時鐘的表針
//獲取當前時間
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;//[0-59]
drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)
//step3，畫表釘
drawCircle(0, 0, 10, '#000');
//step4，畫數字
for (let i = 1; i <= 12; i++) {
/***
* 計算圓周坐標
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}
//step5，畫刻度
for (let i = 0; i < 60; i++) {
/***
* x1,y1 x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判斷是否為整點 */
if (i % 5 == 0) {
var x2 = r_square * Math.cos(θ);
var y2 = r_square * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {
var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
}
封裝：將畫圓的5步全部封裝到一個方法function clock(){…}中
計時器呼叫，每一秒執行一次(需先初始化)
//初始化執行一次
//clock();
setInterval(function () {
clock();
}, 1000)
現在就做完了，下面是完整畫圓代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本時鐘</title>
<style>
canvas {
margin: 0 auto;
border: 2px solid #aaa;
display: block;
}
.clock {
width: 400px;
height: 400px;
margin: 100px auto;
background: #ddd;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="clock">
<!-- canvas在低版本瀏覽器不兼容，需提示用戶 -->
<!-- canvas元素為行內元素，設定居中需要加display：block -->
<!-- canvas元素設定寬高 -->
<canvas id="cont" width="400px" height="400px">
您的瀏覽器版本過低，升級瀏覽器或者使用Chrome打開
</canvas>
<!-- 操作canvas只能使用原生js -->
<script>
/** @type {HTMLCanvasElement} */
//1
var canvas = document.querySelector('#cont');
//2 1,2步一般固定，除了1的畫布id獲取，2固定
var ctx = canvas.getContext('2d');
//3 定義基礎變數
var w = h = 400;//時鐘寬高
var x = y = 200;//時鐘中心坐標
var r = 180;//時鐘半徑
var r_hour = 60;//時針長度
var r_minute = 120;//分針長度
var r_secound = 140;//秒針長度
var r_text = 140;//定義表盤文字半徑
var r_square = 165;//刻度
var r_circle = 10;//表盤小圓點
var deg = 2 * Math.PI;//定義基本的四角
//平移中心點,x=y=0
ctx.translate(w / 2, h / 2);
function clock() {
//step1：畫圓盤
drawCircle(0, 0, r, '#fff');
//step2.畫時鐘的表針
//獲取當前時間
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;//[0-59]
drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)
//step3，畫表釘
drawCircle(0, 0, 10, '#000');
//step4，畫數字
for (let i = 1; i <= 12; i++) {
/***
* 計算圓周坐標
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}
//step5，畫刻度
for (let i = 0; i < 60; i++) {
/***
* x1,y1 x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判斷是否為整點 */
if (i % 5 == 0) {
var x2 = r_square * Math.cos(θ);
var y2 = r_square * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {
var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
}
}
//初始化執行一次
//clock();
setInterval(function () {
clock();
}, 1000)
/*** 寫文字 */
function drawText(text, x, y) {
ctx.font = 'bold 26px 楷體';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}
/*** 畫直線*/
function drawLine(x1, y1, x2, y2, color, width) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//顏色
ctx.strokeStyle = color;
//線寬,不用單位
ctx.lineWidth = width;
ctx.lineCap = 'round';//變圓
ctx.stroke();
ctx.closePath();
}
/*** 畫圓 */
function drawCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
</script>
</div>
</body>
</html>
效果圖如下
12邊形時鐘
相對于圓形時鐘，12邊形剛好對應于時鐘的12個刻度，即我們僅需要改變一下外邊框（時鐘盤）和刻度微調即可
外邊框
//step1.畫12邊形時鐘盤
for (let i = 0; i < 12; i++) {
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x1 = (r + 10) * Math.cos(θ);
var y1 = (r + 10) * Math.sin(θ);
var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12));
var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12));
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
刻度變化
for (let i = 0; i < 60; i++) {
/***
* x1,y1 x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判斷是否為整點 */
if (i % 5 == 0) {
var x1 = (r + 5) * Math.cos(θ);
var y1 = (r + 5) * Math.sin(θ);
var x2 = (r_square) * Math.cos(θ);
var y2 = (r_square) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {
var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
}
下面是此部分完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>十二邊形時鐘</title>
<style>
canvas {
margin: 0 auto;
display: block;
border: solid;
}
.clock {
width: 400px;
height: 400px;
margin: 100px auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="clock">
<!-- canvas在低版本瀏覽器不兼容，需提示用戶 -->
<!-- canvas元素為行內元素，設定居中需要加display：block -->
<!-- canvas元素設定寬高 -->
<canvas id="cont" width="400px" height="400px">
您的瀏覽器版本過低，升級瀏覽器或者使用Chrome打開
</canvas>
<!-- 操作canvas只能使用原生js -->
<script>
/** @type {HTMLCanvasElement} */
//1
var canvas = document.querySelector('#cont');
//2 1,2步一般固定，除了1的畫布id獲取，2固定
var ctx = canvas.getContext('2d');
//3 定義基礎變數
var w = h = 400;//時鐘寬高
var x = y = 200;//時鐘中心坐標
var r = 180;//時鐘半徑
var r_hour = 60;//時針長度
var r_minute = 120;//分針長度
var r_secound = 140;//秒針長度
var r_text = 140;//定義表盤文字半徑
var r_square = 165;//刻度
var r_circle = 10;//表盤小圓點
var deg = 2 * Math.PI;//定義基本的四角
//平移中心點,x=y=0
ctx.translate(w / 2, h / 2);
//step1.畫12邊形時鐘盤
for (let i = 0; i < 12; i++) {
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x1 = (r + 10) * Math.cos(θ);
var y1 = (r + 10) * Math.sin(θ);
var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12));
var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12));
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
function clock() {
//step1：畫圓盤
drawCircle(0, 0, r, '#fff');
//step2.畫時鐘的表針
//獲取當前時間
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;//[0-59]
drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)
//step3，畫表釘
drawCircle(0, 0, 10, '#000');
//step4，畫數字
for (let i = 1; i <= 12; i++) {
/***
* 計算圓周坐標
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}
//step5，畫刻度
for (let i = 0; i < 60; i++) {
/***
* x1,y1 x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判斷是否為整點 */
if (i % 5 == 0) {
var x1 = (r + 5) * Math.cos(θ);
var y1 = (r + 5) * Math.sin(θ);
var x2 = (r_square) * Math.cos(θ);
var y2 = (r_square) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {
var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
}
}
//初始化執行一次
clock();
setInterval(function () {
clock();
drawText('時鐘', 0, 100);
}, 1000)
/*** 寫文字 */
function drawText(text, x, y) {
ctx.font = 'bold 26px 楷體';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}
/*** 畫直線*/
function drawLine(x1, y1, x2, y2, color, width) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//顏色
ctx.strokeStyle = color;
//線寬,不用單位
ctx.lineWidth = width;
ctx.lineCap = 'round';//變圓
ctx.stroke();
ctx.closePath();
}
/*** 畫圓 */
function drawCircle(x, y, r, color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
</script>
</div>
</body>
</html>
效果圖如下
感謝你能看到這里，下面我簡單說一下有些方法和注意點，
1.畫圖，最重要的就是坐標，我們先將中心點平移，使得原本左上方（0,0）變到了圓（時鐘）中心點的坐標，然后對于算圓周邊的坐標較為容易；
2.算坐標，見下圖，x = x0+rcos(θ),y=y0+rsin(θ);
對于刻度，可以視為同心圓，即處于數字和圓邊緣之內
3.對于cos,sin注意使用弧度制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305702.html
標籤：其他
上一篇：Vuex一篇就夠
下一篇：JavaScript事件流