js+畫布canvas製作時鐘特效

阿新 • • 發佈：2019-01-18

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script>
//定義一個函式繪製時鐘
function drawClock(){
var context=document.getElementById("c").getContext("2d");
//每次繪製新圖形之前清空當前區域
context.clearRect(0,0,500,500);
var hs = [" I ", "I I", "III", "I V", " V ", "V I", "VII", "VIII", "I X", " X ", "X I", "XII"];
//畫表盤
context.beginPath();
context.arc(250,250,200,0,2*Math.PI);
context.strokeStyle="#A9A9A9";
context.lineWidth=15;
context.stroke();
context.closePath();
//迴圈繪製分鐘刻度
//重新定義畫布的原點
context.translate(250,250);
//繪製分鐘刻度
for (var i=0;i<60;i++) {
//每次旋轉6度
context.rotate(6*Math.PI/180);
context.beginPath();
context.moveTo(0,-185);
context.lineTo(0,-190);
context.lineWidth=4;
context.strokeStyle="lightgreen"
context.stroke();
context.closePath();
}
//繪製小時刻度
for(var i = 0; i < 12; i++) {
//旋轉30度
context.rotate(30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -180);
context.lineTo(0, -190);
context.strokeStyle = "#008000";
context.stroke();
context.closePath();

context.beginPath();
context.font="12px 微軟雅黑";
//文字輪廓
context.fillStyle = "red";
context.fillText(hs[i], -8, -160);
context.closePath();
}
//獲取現在的系統時間
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
//獲得的小時是一個整數,需要加上分鐘代表的小數
hour = hour + minute / 60;
//如果是下午減去12
hour = hour > 12 ? hour - 12 : hour;
var second = date.getSeconds();
//畫時針
context.rotate(hour * 30 * Math.PI / 180);
context.beginPath();
//設定線段開始點
context.moveTo(0, 20);
//設定線段結束點
context.lineTo(0, -80);
context.lineWidth = 5;
context.strokeStyle = "#008000";
context.stroke();
context.closePath();
//將畫布角度還原到初始狀態
context.rotate(-hour * 30 * Math.PI / 180);

//畫分針
context.rotate(minute * 6 * Math.PI / 180);
context.beginPath();
//設定線段開始點
context.moveTo(0, 20);
//設定線段結束點
context.lineTo(0, -140);
context.lineWidth = 4;
context.strokeStyle = "lightgreen";
context.stroke();
context.closePath();
//將畫布角度還原到初始狀態
context.rotate(-minute * 6 * Math.PI / 180);

//畫秒針
context.rotate(second * 6 * Math.PI / 180);
context.beginPath();
//設定線段開始點
context.moveTo(0, 20);
//設定線段結束點
context.lineTo(0, -175);
context.lineWidth = 3;
context.strokeStyle = "crimson";
context.stroke();
context.closePath();
//在圓形的中心點繪製一個圓形
context.beginPath();
context.arc(0,0,10,0,2*Math.PI);
context.fillStyle="gold";
context.fill();
context.closePath();
//在秒針上端繪製一個圓形
context.beginPath();
context.arc(0,-155,8,0,2*Math.PI);
context.fillStyle="gold";
context.fill();
context.closePath();
//將畫布角度還原到初始狀態
context.rotate(-second * 6 * Math.PI / 180);
//將圓心的位置重置到左上角
context.translate(-250, -250);
}
drawClock();
//每隔一秒鐘重新繪製時鐘
setInterval("drawClock()",1000);
</script>
</body>

</html>

js+畫布canvas製作時鐘特效

js+畫布canvas製作時鐘特效

製作時鐘特效

canvas 製作時鐘

Canvas製作時鐘

Canvas時鐘特效-JS效果

js畫布組件(<canvas></canvas>)

原生js之canvas時鐘組件

HTML5-用Canvas製作會走動的時鐘

利用H5中canvas畫布繪製一個時鐘(動態)

用canvas製作一個時鐘

js使用canvas畫布畫太極圖案

JS用定時器製作時鐘

js canvas 轉動時鐘例項

【動畫】簡易製作貝塞爾曲線動畫（JS+css3+canvas）

H5畫布canvas特效（磚塊放射效果）

利用HTML5的canvas製作萬花筒動畫特效

純js時鐘特效詳細程式碼分析例項教程

分針網——IT教育：用js原生寫黑客帝國特效

跟KingDZ學HTML5之三畫布Canvas

跟KingDZ學HTML5之七探究Canvas之各種特效

js+畫布canvas製作時鐘特效

相關推薦