溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
具體內容如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
display: block;
margin: 0 auto;
background-color: #fdffad;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var oC=document.querySelector('canvas');
var gd=oC.getContext('2d');
var r=oC.width/2;
function drawBackground() {
gd.save();
//漸變
var ra = gd.createLinearGradient(600, 0, 400, 0);
ra.addColorStop(1, '#2dd9ff');
ra.addColorStop(0, '#8c48dd');
//表盤
gd.translate(r, r);
gd.beginPath();
gd.fillStyle = ra;
gd.lineWidth = 10;
gd.strokeStyle = '#211f4e';
gd.arc(0, 0, r-5, 0, Math.PI *2, false);
gd.fill();
gd.stroke();
//數字
for (var i = 1; i < 13; i++) {
var rad=i * Math.PI * 2 / 12;
var x = Math.sin(rad)*(r-70);
var y= -Math.cos(rad)*(r-70);
gd.fillStyle = "red";
gd.font = "bold 80px Calibri";
gd.lineWidth = 1;
gd.textAlign = 'center';
gd.textBaseline = 'middle';
gd.strokeText(i, x, y);
}
//點
for (var i = 0; i < 60; i++) {
gd.beginPath();
var rad=i * Math.PI * 2 / 60;
var x = Math.sin(rad)*(r-30);
var y= -Math.cos(rad)*(r-30);
if (i % 5 == 0) {
gd.fillStyle = 'red';
}
else {
gd.fillStyle = '#ccc'
}
gd.lineWidth = 2;
gd.arc(x, y, 6, 0, Math.PI * 2, false);
gd.fill();
gd.stroke();
gd.closePath();
}
}
//時針
function drawHour(h,m){
gd.save();
gd.beginPath();
var rad=2*Math.PI/12*h;
var mrad=2*Math.PI/12/60*m;
gd.rotate(rad+mrad);
gd.lineWidth=20;
gd.lineCap='round';
gd.moveTo(0,10);
gd.lineTo(0,-r/3);
gd.stroke();
gd.closePath();
gd.restore();
}
//分針
function drawMinutes(m){
gd.save();
gd.beginPath();
var rad=2*Math.PI/60*m;
gd.rotate(rad);
gd.lineWidth=10;
gd.lineCap='round';
gd.moveTo(0,10);
gd.lineTo(0,-r/2);
gd.stroke();
gd.closePath();
gd.restore();
}
//秒針
function drawSeconds(s){
gd.save();
gd.beginPath();
var rad=2*Math.PI/60*s;
gd.rotate(rad);
gd.fillStyle='red';
gd.moveTo(-2,20);
gd.lineTo(2,20);
gd.lineTo(1,-r+100);
gd.lineTo(-1,-r+100);
gd.fill();
gd.closePath();
gd.restore();
}
//圓點
function drawPoint(){
gd.beginPath();
gd.fillStyle='#fff';
gd.arc(0,0,5,Math.PI*2,false);
gd.fill();
}
function drawClock(){
gd.clearRect(0,0,oC.width,oC.height);
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
drawBackground();
drawHour(h,m);
drawMinutes(m);
drawSeconds(s);
drawPoint();
gd.restore();
}
drawClock();
setInterval(drawClock,1000);
},false);
</script>
</head>
<body>
<canvas width="800" height="800"></canvas>
</body>
</html>效果圖：
看完上述內容，你們對怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
