Canvas圓形時鐘
2020-10-12 16:00:13
今天帶來一個圓形時鐘，用JQ編寫的Canvas 程式碼。Canvas 的神奇之處就在於，可以自行繪製圖片不需要外部引入，當你深入瞭解這項技術的時候，你也會忍不住讚歎他的神奇之處。
雖然我一再強調，自學也是人生的一門必修課。但哪怕我接連幾天不眠不休寫出了 Canvas 教學，大家還是置若罔聞，要求我在程式碼中寫下詳細註釋。從我的角度來講：不寫註釋可以減少程式碼量，大批次的註釋會顯得十分冗餘，我出的 Canvas 教學如果大家認真閱讀、練習的話，讀懂這些程式碼不成問題。就好像對著官方檔案我可以手寫JQuery，可離了官方檔案我就是個弟弟。很多時候能看懂不一定能默寫，我們要學習的是方法和思路。
這一篇Canvas動畫裡有非常詳細註釋，謹以此來慰問諸君對我的青睞，感謝！
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas圓形時鐘</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style type="text/css">
#myCanvas {
opacity: 0.8;
-webkit-animation: roll 3s;
animation: roll 3s;
}
@-webkit-keyframes roll {
from{-webkit-transform:rotate(360deg);opacity:0;}
to{-webkit-transform:rotate(0deg);opacity:0.8;}
}
@keyframes roll {
from{transform:rotate(360deg);opacity:0;}
to{transform:rotate(0deg);opacity:0.8;}
}
</style>
</head>
<body>
<div style="width:150px;margin:150px auto;">
<canvas id="myCanvas" width="150" height="150"></canvas>
</div>
<!-- 時鐘懸浮網頁遊動 -->
<!-- <script>
var x = 50,y = 60;//圖片距離頂部的位置
var xin = true, yin = true
var step = 1 //圖片移動的步速 越高越快
var delay = 10 //圖片移動延時 越高越慢
var obj=document.getElementById("myCanvas")
function float() {
var L=T=0
var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 則是網頁內容實際高度
var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透過瀏覽器看內容的這個區域高度。
obj.style.left = x + document.documentElement.scrollLeft + "px";
obj.style.top = y + document.documentElement.scrollTop + "px";
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.οnmοuseοver=function(){clearInterval(itl)}
obj.οnmοuseοut=function(){itl=setInterval("float()", delay)}
</script> -->
</body>
<script>
$(function(){
var iNow = 0;
var arr = ["#ffae00","black"];
myClock();
myday();
setInterval(myClock,1000);//每一秒鐘重繪一次
setInterval(myday,1000);
function myday(){
var a = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = new Date().getDay();
var dateDom=new Date();
var year=dateDom.getFullYear();
var month=dateDom.getMonth()+1;
var day=dateDom.getDate();
var mm=year+"-"+month+"-"+day;
var myCanvas = document.getElementById("myCanvas");
var cxt=myCanvas.getContext("2d");
cxt.font="14px 黑體";
//繪製實心字
cxt.fillStyle="red";//填充紅色
cxt.fillText(mm,50,105);
for(var ind=0;ind<6;ind++){
if(week==ind){
var myCanvas = document.getElementById("myCanvas");
var cxt=myCanvas.getContext("2d");
cxt.font="14px 黑體";
//繪製實心字
cxt.strokeStyle="red";//填充紅色
cxt.strokeText(a[ind],55,55);
}
}
}
function myClock(){
//得到年月日
var myCanvas = document.getElementById("myCanvas");
var oC = myCanvas.getContext("2d");
//得到時分秒
var now = new Date(),
sec = now.getSeconds(),
min = now.getMinutes(),
hour = now.getHours();
hour = hour>=12 ? hour-12 : hour;
iNow++;
iNow = iNow%2;
oC.save();//save():儲存當前環境的狀態
//初始化畫布
oC.clearRect(0,0,myCanvas.width,myCanvas.height);//clearRect:在給定的矩形內清除指定的畫素
oC.translate(75,75);//translate:重新對映畫布上的 (0,0) 位置
oC.scale(0.5,0.5);//scale:縮放當前繪圖至更大或更小
oC.rotate(-Math.PI/2);//rotate:旋轉當前繪圖
// Math.PI: PI 屬性就是 π，即圓的周長和它的直徑之比
//白色背景
oC.save();
oC.fillStyle = "#ccc";
oC.beginPath();//beginPath:起始一條路徑，或重置當前路徑
oC.arc(0,0,14+0,0,Math.PI*2,true);//arc:建立弧/曲線（用於建立圓形或部分圓）
oC.fill();//fill:填充當前繪圖（路徑）
oC.restore();//restore:返回之前儲存過的路徑狀態和屬性
oC.strokeStyle = "#548B54";//strokeStyle:設定或返回用於筆觸的顏色、漸變或模式
oC.fillStyle = "black";//fillStyle:設定或返回用於填充繪畫的顏色、漸變或模式
oC.lineWidth = 4;//設定或返回當前的線條寬度
oC.lineCap = "round"; //設定或返回線條的結束端點樣式
//時針刻度
oC.save();
oC.beginPath();
for(var i=0; i<12; i++){
oC.moveTo(110,0);//把路徑移動到畫布中的指定點，不建立線條
oC.lineTo(120,0);//新增一個新點，然後在畫布中建立從該點到最後指定點的線條
oC.rotate(Math.PI/6);//旋轉當前繪圖
}
oC.stroke();//繪製已定義的路徑
oC.restore();
//分針刻度
oC.save();
oC.fillStyle = "black";
oC.lineWidth = 2;
oC.beginPath();
for(var i=0; i<60; i++){
if(i%5 != 0){
oC.moveTo(116,0);
oC.lineTo(120,0);
}
oC.rotate(Math.PI/30);
}
oC.stroke();
oC.restore();
oC.save();
oC.rotate(Math.PI/2);
oC.font = "30px impact";
//12點
oC.fillText("12",-15,-80);
oC.fillText("1",40,-75); //文字的 x 座標位置,文字的 y 座標位置
oC.fillText("2",80,-35);
//3點
oC.fillText("3",88,13);
//6點
oC.fillText("6",-8,104);
//9點
oC.fillText("9",-103,11);
oC.restore();
//畫時針
oC.save();
oC.strokeStyle = "#ff3300";
oC.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
oC.lineWidth = 8;
oC.beginPath();
oC.moveTo(-20,0);
oC.lineTo(60,0);
oC.stroke();
oC.restore();
//畫分針
oC.save();
oC.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
oC.strokeStyle = "#27A9E3";
oC.lineWidth = 6;
oC.beginPath();
oC.moveTo(-28,0);
oC.lineTo(90,0);
oC.stroke();
oC.restore();
//畫秒針
/*oC.save();
oC.rotate(sec*Math.PI/30);
oC.strokeStyle = "#D40000";
oC.lineWidth = 3;
oC.beginPath();
oC.moveTo(-30,0);
oC.lineTo(105,0);
oC.stroke();
oC.restore();*/
//風車秒針
oC.save();
oC.rotate(sec*Math.PI/30);
oC.save();
oC.fillStyle = "#f23";
oC.beginPath();
oC.arc(94,0,10,0,Math.PI,true);
oC.fill();
oC.restore();
oC.save();
oC.rotate(Math.PI/2);
oC.fillStyle = "#ffae00";
oC.beginPath();
oC.arc(10,-84,10,0,Math.PI,true);
oC.fill();
oC.restore();
oC.save();
oC.fillStyle = "#27A9E3";
oC.beginPath();
oC.arc(74,0,10,Math.PI,Math.PI*2,true);
oC.fill();
oC.restore();
oC.save();
oC.rotate(Math.PI/2);
oC.fillStyle = "#0eaf52";
oC.beginPath();
oC.arc(-10,-84,10,Math.PI,Math.PI*2,true);
oC.fill();
oC.restore();
oC.restore()
//風車秒針
//表框
oC.save();
oC.lineCap = "butt";
oC.lineWidth = 16;
//調整邊框樣式
oC.save();
oC.strokeStyle = "#BBFFFF";
oC.beginPath();
oC.arc(0,0,142,0,Math.PI*2,true);
oC.stroke();
oC.restore();
oC.save();
oC.strokeStyle = "#C0FF3E";
oC.beginPath();
oC.arc(0,0,142,0,Math.PI/iNow*5/3,true);
oC.stroke();
oC.restore();
oC.restore();
//中心點
oC.save();
oC.fillStyle = "#fff";
oC.beginPath();
oC.arc(0,0,4,0,Math.PI*2,true);
oC.fill();
oC.restore();
oC.restore();
};
});
</script>
</html>
如果你不滿足於簡單的閱讀和摘錄，請從我的 Canvas 分欄中尋找 基礎教學，自學也是人生的一門必修課，感謝你們陪伴至今，我為自己的零註釋行為感動慚愧。
微信掃碼，掌上閱讀Canvas 教學，走到哪裡學到哪裡
特別推薦：
JQ俄羅斯方塊
Canvas點線相交
激流勇進V3.0
遊動的花花腸子
阿波羅的輕語