《 初學 》 html5 製作簡單時鐘
阿新 • • 發佈：2019-01-27
/*
示例一、
var canvas = document.getElementById("canvas1"),
context = canvas.getContext("2d"); //獲取繪圖環境變數
context.font = "38pt Arial";
context.fillStyel = "cornflowerblue"; //顏色
context.strokeStyle = "blue"; //字元的輪廓線（描邊）
context.fillText("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15); // 引數1、要繪製的文字內容。 引數2、canvas中要顯示文字的“橫”座標。 引數3、canvas 中要顯示文字的“縱”座標
context.fillStroke("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15);
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------備註：Math.sin() 與 Math.cos() 用法----------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之間；
Math.cos(x) x 的餘弦值。返回的是 -1.0 到 1.0 之間的數；
這兩個函式中的X 都是指的“弧度”而非“角度”，弧度的計算公式為： 2*PI/360*角度；
30° 角度 的弧度 = 2*PI/360*30
如何得到圓上每個點的座標？
解決思路：根據三角形的正玄、餘弦來得值；
假設一個圓的圓心座標是(a,b)，半徑為r，
則圓上每個點的X座標=a + Math.sin(2*Math.PI / 360) * r ；Y座標=b + Math.cos(2*Math.PI / 360) * r ；
如何求時鐘的秒針轉動一圈的軌跡？
假設秒針的初始值（起點）為12點鐘方向，圓心的座標為（a,b)。
解決思路：一分鐘為60秒，一個圓為360°，所以平均每秒的轉動角度為 360°/60 = 6°；
for(var times=0; times<60; times++) {
var hudu = (2*Math.PI / 360) * 6 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r // 注意此處是“-”號，因為我們要得到的Y是相對於（0,0）而言的。
}
*/
/*時鐘canvas開始*/
// var offscreen = document.createElement('canvas'); //建立canvas元素
var clockCanvas = document.getElementById("canvas"),
clockContext = clockCanvas.getContext("2d"),
font_height = 15,
margin = 35,
hand_truncation = clockCanvas.width / 2,
hour_hand_truncation = clockCanvas.width / 10,
numeral_spacing = 20,
radius = clockCanvas.width / 2 - margin,
hand_radius = radius + numeral_spacing;
//第一步、 drawCircle 繪製一個表示鐘面的圓形
function drawCircle() {
clockContext.beginPath(); // 1、定義路徑（不可見）
clockContext.arc(clockCanvas.width / 2, clockCanvas.heigth / 2, radius, 0, Math.PI * 2, true);// 2、arc() 建立一個圓形路徑
clockContext.stroke(); //呼叫完成後路徑變為可見
}
//第三步、繪製鐘面數字
function drawNumerals() {
var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
angle = 0,
numeralWidth = 0;
numerals.forEach(function (numeral) {
angle = Math.PI / 6 * (numeral - 3);
numeralWidth = clockContext.measureText(numeral).width;
clockContext.fillText(
numeral,
clockCanvas.width / 2 + Math.cos(angle) * (hand_radius) - numeralWidth / 2,
clockCanvas.height / 2 + Math.sin(angle) * (hand_radius) + font_height / 3
);// fillText 繪製數字並進行canvas文字填充
});
}
//第二步、 drawCenter 繪製時鐘中心的 小實心圓
function drawCenter() {
//組合呼叫beginPath（）、arc() 、 fill() 繪製圓心點
clockContext.beginPath();
clockContext.arc(
clockCanvas.width / 2,
clockCanvas.height / 2,
5,
0,
Math.PI * 2,
true
);
clockContext.fill();
}
//第四步、繪製指標
function drawHand(loc, isHour) {
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
handadius = isHour ? radius - hand_truncation - hour_hand_truncation : radius - hand_truncation;
clockContext.moveTo(clockCanvas.width / 2, clockCanvas.height / 2);//1、呼叫 moveTo() 方法將畫筆移動到canvas中的制定地點
clockContext.lineTo(
clockCanvas.width / 2 + Math.cos(angle) * handadius, //cos(angle) angle的餘弦值。返回的是 -1.0 到 1.0 之間的數
clockCanvas.height / 2 + Math.sin(angle) * handadius //sin(angle) angle 的正玄值。返回值在 -1.0 到 1.0 之間
);//2、呼叫 lineTo() 在該點娛另一個指定的點之間繪製一條不可見的路徑
clockContext.stroke();//3、呼叫 stroke() 方法將當前路徑變為可見
}
function drawHands() {
var date = new Date,
hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
//函式呼叫
drawHand(hour * 5 + (date.getMilliseconds() / 60) * 5, true, 0.5);
drawHand(date.getMinutes(), false, 0.5);
drawHand(date.getSeconds(), false, 0.2);
}
function drawClock() {
// clearRect() 方法擦除canvas 從新繪製時鐘
clockContext.clearRect(0, 0, clockCanvas.width, clockCanvas.height);
drawCircle(); //方法呼叫
drawCenter();
drawHands();
drawNumerals();
}
clockContext.font = font_height + "px Arial";
//初始化： setInterval() 方法制作時鐘的動畫效果，該方法每秒鐘呼叫一次drawClock（） 函式
loop = setInterval(drawClock, 1000);
示例一、
var canvas = document.getElementById("canvas1"),
context = canvas.getContext("2d"); //獲取繪圖環境變數
context.font = "38pt Arial";
context.fillStyel = "cornflowerblue"; //顏色
context.strokeStyle = "blue"; //字元的輪廓線（描邊）
context.fillText("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15); // 引數1、要繪製的文字內容。 引數2、canvas中要顯示文字的“橫”座標。 引數3、canvas 中要顯示文字的“縱”座標
context.fillStroke("你好啊", canvas.width / 2 - 150, canvas.height / 2 + 15);
-------------------------------------------------------------------------------------------------------------------------------
---------------------------------------備註：Math.sin() 與 Math.cos() 用法----------------------------------------
-------------------------------------------------------------------------------------------------------------------------------
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之間；
Math.cos(x) x 的餘弦值。返回的是 -1.0 到 1.0 之間的數；
這兩個函式中的X 都是指的“弧度”而非“角度”，弧度的計算公式為： 2*PI/360*角度；
30° 角度 的弧度 = 2*PI/360*30
如何得到圓上每個點的座標？
解決思路：根據三角形的正玄、餘弦來得值；
假設一個圓的圓心座標是(a,b)，半徑為r，
則圓上每個點的X座標=a + Math.sin(2*Math.PI / 360) * r ；Y座標=b + Math.cos(2*Math.PI / 360) * r ；
如何求時鐘的秒針轉動一圈的軌跡？
假設秒針的初始值（起點）為12點鐘方向，圓心的座標為（a,b)。
解決思路：一分鐘為60秒，一個圓為360°，所以平均每秒的轉動角度為 360°/60 = 6°；
for(var times=0; times<60; times++) {
var hudu = (2*Math.PI / 360) * 6 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r // 注意此處是“-”號，因為我們要得到的Y是相對於（0,0）而言的。
}
*/
/*時鐘canvas開始*/
// var offscreen = document.createElement('canvas'); //建立canvas元素
var clockCanvas = document.getElementById("canvas"),
clockContext = clockCanvas.getContext("2d"),
font_height = 15,
margin = 35,
hand_truncation = clockCanvas.width / 2,
hour_hand_truncation = clockCanvas.width / 10,
numeral_spacing = 20,
radius = clockCanvas.width / 2 - margin,
hand_radius = radius + numeral_spacing;
//第一步、 drawCircle 繪製一個表示鐘面的圓形
function drawCircle() {
clockContext.beginPath(); // 1、定義路徑（不可見）
clockContext.arc(clockCanvas.width / 2, clockCanvas.heigth / 2, radius, 0, Math.PI * 2, true);// 2、arc() 建立一個圓形路徑
clockContext.stroke(); //呼叫完成後路徑變為可見
}
//第三步、繪製鐘面數字
function drawNumerals() {
var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
angle = 0,
numeralWidth = 0;
numerals.forEach(function (numeral) {
angle = Math.PI / 6 * (numeral - 3);
numeralWidth = clockContext.measureText(numeral).width;
clockContext.fillText(
numeral,
clockCanvas.width / 2 + Math.cos(angle) * (hand_radius) - numeralWidth / 2,
clockCanvas.height / 2 + Math.sin(angle) * (hand_radius) + font_height / 3
);// fillText 繪製數字並進行canvas文字填充
});
}
//第二步、 drawCenter 繪製時鐘中心的 小實心圓
function drawCenter() {
//組合呼叫beginPath（）、arc() 、 fill() 繪製圓心點
clockContext.beginPath();
clockContext.arc(
clockCanvas.width / 2,
clockCanvas.height / 2,
5,
0,
Math.PI * 2,
true
);
clockContext.fill();
}
//第四步、繪製指標
function drawHand(loc, isHour) {
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
handadius = isHour ? radius - hand_truncation - hour_hand_truncation : radius - hand_truncation;
clockContext.moveTo(clockCanvas.width / 2, clockCanvas.height / 2);//1、呼叫 moveTo() 方法將畫筆移動到canvas中的制定地點
clockContext.lineTo(
clockCanvas.width / 2 + Math.cos(angle) * handadius, //cos(angle) angle的餘弦值。返回的是 -1.0 到 1.0 之間的數
clockCanvas.height / 2 + Math.sin(angle) * handadius //sin(angle) angle 的正玄值。返回值在 -1.0 到 1.0 之間
);//2、呼叫 lineTo() 在該點娛另一個指定的點之間繪製一條不可見的路徑
clockContext.stroke();//3、呼叫 stroke() 方法將當前路徑變為可見
}
function drawHands() {
var date = new Date,
hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
//函式呼叫
drawHand(hour * 5 + (date.getMilliseconds() / 60) * 5, true, 0.5);
drawHand(date.getMinutes(), false, 0.5);
drawHand(date.getSeconds(), false, 0.2);
}
function drawClock() {
// clearRect() 方法擦除canvas 從新繪製時鐘
clockContext.clearRect(0, 0, clockCanvas.width, clockCanvas.height);
drawCircle(); //方法呼叫
drawCenter();
drawHands();
drawNumerals();
}
clockContext.font = font_height + "px Arial";
//初始化： setInterval() 方法制作時鐘的動畫效果，該方法每秒鐘呼叫一次drawClock（） 函式
loop = setInterval(drawClock, 1000);