復(fù)制代碼代碼如下: !DOCTYPE html html head meta charset="UTF-8" title HTML CLOCK /title /head body canvas width="500" height="500" id="clock" 你的瀏覽器不支持canvas標(biāo)簽，時針顯示不出來哦！ /canvas
script type="text/javascript" //畫布背景顏色 var clockBackGroundColor = "#ABCDEF"; //時針顏色 var hourPointColor = "#000"; //時針粗細(xì) var hourPointWidth = 7; //時針長度 var hourPointLength = 100; //分針顏色 var minPointColor = "#000"; //分針粗細(xì) var minPointWidth = 5; //分針長度 var minPointLength = 150; //秒針顏色 var secPointColor = "#F00"; //秒針粗細(xì) var secPointWidth = 3; //秒針長度 var secPointLength = 170; //表盤顏色 var clockPanelColor = "#ABCDEF"; //表盤刻度顏色 var scaleColor = "#000"; //表盤大刻度寬度 3 6 9 12 var scaleBigWidth = 9; //表盤大刻度的長度 var scaleBigLength = 15; //表盤小刻度的寬度 var scaleSmallWidth = 5; //表盤小刻度的長度 var scaleSmallLength = 10; //圓心顏色 var centerColor = 'red';
//時鐘畫布 var clock = document.getElementById('clock'); clock.style.background = clockBackGroundColor; //時針畫布的作圖環(huán)境（畫板） var panel = clock.getContext('2d');
panel.fillText("",10,20); panel.fillText(" a http://www.phpstudy.net",10,40 /a var date = new Date(); var sec = date.getSeconds(); var min = date.getMinutes(); var hour = date.getHours() + min/60; drowCircle(panel,7,'blue',250,250,200); drowScales(panel);
