html5使用canvas繪制“鐘表”圖案的方法

發布時間：2020-09-14 14:58:26 來源：億速云閱讀：124 作者：小新欄目：web開發

html5使用canvas繪制“鐘表”圖案的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

一、介紹Canvas

Canvas 是指定了長度和寬度的矩形畫布，我們將使用新的HTML5 JavaScript，可使用HTML5 JS API 來畫出各種圖形。不過，canvas本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。

現在大部分瀏覽器都支持canvas，使用canvas前要新建個畫布，就是這樣

<canvas id="myCanvas" width="200" height="100"></canvas>

二、Canvas中常用的屬性和方法

顏色和樣式：

fillStyle 設置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle 設置或返回用于筆觸的顏色、漸變或模式
shadowColor 設置或返回用于陰影的顏色

矩形：

rect() 創建矩形
fillRect() 繪制“被填充”的矩形
strokeRect() 繪制矩形（無填充）
clearRect() 在給定的矩形內清除指定的像素

路徑：

fill() 填充當前繪圖（路徑）
stroke() 繪制已定義的路徑
beginPath() 起始一條路徑，或重置當前路徑
moveTo() 把路徑移動到畫布中的指定點，不創建線條
closePath() 創建從當前點回到起始點的路徑
lineTo() 添加一個新點，然后在畫布中創建從該點到最后指定點的線條
clip() 從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo() 創建二次貝塞爾曲線
bezierCurveTo() 創建三次方貝塞爾曲線
arc() 創建弧/曲線（用于創建圓形或部分圓）
arcTo() 創建兩切線之間的弧/曲線
isPointInPath() 如果指定的點位于當前路徑中，則返回 true，否則返回 false

文本：

font 設置或返回文本內容的當前字體屬性
textAlign 設置或返回文本內容的當前對齊方式
textBaseline 設置或返回在繪制文本時使用的當前文本基線
fillText() 在畫布上繪制“被填充的”文本
strokeText() 在畫布上繪制文本（無填充）
measureText() 返回包含指定文本寬度的對象

圖像繪制：

drawImage() 向畫布上繪制圖像、畫布或視頻

三、繪制鐘表

首先新建一個html文件，新建畫板并且給畫板增加些樣式，就像這樣

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas畫布</title>
		<style type="text/css">
			#canvas {
				border: 1px solid #000;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- 新建畫板 --><canvas id="canvas" width="400" height="400"></canvas>
	</body>
</html>

然后開始操作canvas

<script>
			//獲取canvas標簽，并且創建 context 對象 
			var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				deg = Math.PI / 180;
			context.translate(200, 200);
		</script>

說明：getContext(“2d”) 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法，deg計算圓周率，translate() 畫布的位置。
1.創建表盤、數字、刻度、中心點

創建表盤

context.beginPath();
context.arc(0, 0, 150, 0, 360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();

創建數字

//創建數字
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * i * deg);
  context.textAlign = 'center';
  if (i % 3 == 0) {
      context.fillStyle = 'red';
      context.font = "normal 28px arial";
      context.fillText(i, 0, -110);
  } else {
      context.font = "normal 20px arial";
      context.fillText(i, 0, -120);
  }
  context.restore();
  context.closePath();
}

創建刻度

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0, -150);
    //判斷刻度顯示顏色
    if (i % 15 == 0) {
        context.strokeStyle = 'red';
        context.lineWidth = 3;
        context.lineTo(0, -135);
        context.stroke();
    } else if (i % 5 == 0) {
        context.strokeStyle = 'orange';
        context.lineWidth = 2;
        context.lineTo(0, -140);
        context.stroke();
    } else {
        context.strokeStyle = '#000';
        context.lineWidth = 1;
        context.lineTo(0, -145);
        context.stroke();
    }
    context.restore();
    context.closePath();
}

創建中心點

context.beginPath();
 context.arc(0, 0, 5, 0, 360 * deg);
 context.fill();
 context.closePath();

效果圖：

html5使用canvas繪制“鐘表”圖案的方法

2.創建指針

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); //毫秒
 //秒針
 context.beginPath();
 context.save();
 context.lineWidth = 1;
 context.strokeStyle = 'red';
 //context.rotate(6*second*deg);
 context.rotate((ms / 1000 + second) * 6 * deg);
 context.moveTo(0, 20);
 context.lineTo(0, -130);
 context.stroke();
 context.restore();
 context.closePath();
 //分針
 context.beginPath();
 context.save();
 context.lineWidth = 2;
 context.strokeStyle = 'orange';
 //context.rotate((second/60+minu)*6*deg);
 context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
 context.moveTo(0, 10);
 context.lineTo(0, -120);
 context.stroke();
 context.restore();
 context.closePath();
 //時針
 context.beginPath();
 context.save();
 context.lineWidth = 3;
 context.strokeStyle = '#000';
 //context.rotate((second/3600+minu/60+hour)*30*deg);
 context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
 context.moveTo(0, 0);
 context.lineTo(0, -110);
 context.stroke();
 context.restore();
 context.closePath();

效果圖：

html5使用canvas繪制“鐘表”圖案的方法

是不是以為到現在就結束了，我大聲的告訴大家沒有，現在才是剛剛開始，接下來就是見證奇跡的時刻。。。

3.最后完成

我們需要把上邊的繪制封裝成方法，然后不停的繪制不停的清除這樣鐘表就動起來了

function dialPlate() { //創建表盤
    //context.clearRect(-150,-150,400,400);//清除畫布
    context.beginPath();
    context.arc(0, 0, 150, 0, 360 * deg);
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //創建刻度
    for (var i = 1; i <= 60; i++) {
        context.beginPath();
        context.save();
        context.rotate(6 * i * deg);
        context.moveTo(0, -150);
        if (i % 15 == 0) {
            context.strokeStyle = 'red';
            context.lineWidth = 3;
            context.lineTo(0, -135);
            context.stroke();
        } else if (i % 5 == 0) {
            context.strokeStyle = 'orange';
            context.lineWidth = 2;
            context.lineTo(0, -140);
            context.stroke();
        } else {
            context.strokeStyle = '#000';
            context.lineWidth = 1;
            context.lineTo(0, -145);
            context.stroke();
        }
        context.restore();
        context.closePath();
    }
    //創建數字
    for (var i = 1; i <= 12; i++) {
        context.beginPath();
        context.save();
        context.rotate(30 * i * deg);
        context.textAlign = 'center';
        if (i % 3 == 0) {
            context.fillStyle = 'red';
            context.font = "normal 28px arial";
            context.fillText(i, 0, -110);
        } else {
            context.font = "normal 20px arial";
            context.fillText(i, 0, -120);
        }
        context.restore();
        context.closePath();
    }
    //中心點
    context.beginPath();
    context.arc(0, 0, 5, 0, 360 * deg);
    context.fill();
    context.closePath();
}
function Pointer() { //創建指針
    var nowdate = new Date(),
        hour = nowdate.getHours() % 12,
        minu = nowdate.getMinutes(),
        second = nowdate.getSeconds();
    var ms = nowdate.getMilliseconds(); //毫秒
    //秒針
    context.beginPath();
    context.save();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    //context.rotate(6*second*deg);
    context.rotate((ms / 1000 + second) * 6 * deg);
    context.moveTo(0, 20);
    context.lineTo(0, -130);
    context.stroke();
    context.restore();
    context.closePath();
    //分針
    context.beginPath();
    context.save();
    context.lineWidth = 2;
    context.strokeStyle = 'orange';
    //context.rotate((second/60+minu)*6*deg);
    context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
    context.moveTo(0, 10);
    context.lineTo(0, -120);
    context.stroke();
    context.restore();
    context.closePath();
    //時針
    context.beginPath();
    context.save();
    context.lineWidth = 3;
    context.strokeStyle = '#000';
    //context.rotate((second/3600+minu/60+hour)*30*deg);
    context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
    context.moveTo(0, 0);
    context.lineTo(0, -110);
    context.stroke();
    context.restore();
    context.closePath();
}
dialPlate();
Pointer();
setInterval(function(){
dialPlate();
Pointer();
},1000/60)

說明：動畫每秒執行60次是最好的，所以定時器才讓他沒秒執行60次。

感謝各位的閱讀！看完上述內容，你們對html5使用canvas繪制“鐘表”圖案的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

html5使用canvas繪制“鐘表”圖案的方法

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

html5使用canvas繪制“鐘表”圖案的方法

猜你喜歡

最新資訊

相關推薦

相關標簽