html5使用canvas繪制“鐘表”圖案的方法-創(chuàng)新互聯(lián)

html5使用canvas繪制“鐘表”圖案的方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計公司、網(wǎng)站定制、營銷型網(wǎng)站建設(shè)、微信小程序、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項(xiàng)目落地，為成都木托盤企業(yè)提供源源不斷的流量和訂單咨詢。

一、介紹Canvas

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

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

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

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

顏色和樣式：

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

矩形：

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

路徑：

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

文本：

font 設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性
textAlign 設(shè)置或返回文本內(nèi)容的當(dāng)前對齊方式
textBaseline 設(shè)置或返回在繪制文本時使用的當(dāng)前文本基線
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標(biāo)簽，并且創(chuàng)建 context 對象 
			var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				deg = Math.PI / 180;
			context.translate(200, 200);
		</script>

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

創(chuàng)建表盤

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

創(chuàng)建數(shù)字

//創(chuàng)建數(shù)字
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();
}

創(chuàng)建刻度

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();
}

創(chuàng)建中心點(diǎn)

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

效果圖：

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

2.創(chuàng)建指針

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繪制“鐘表”圖案的方法

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

3.最后完成

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

function dialPlate() { //創(chuàng)建表盤
    //context.clearRect(-150,-150,400,400);//清除畫布
    context.beginPath();
    context.arc(0, 0, 150, 0, 360 * deg);
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //創(chuàng)建刻度
    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();
    }
    //創(chuàng)建數(shù)字
    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();
    }
    //中心點(diǎn)
    context.beginPath();
    context.arc(0, 0, 5, 0, 360 * deg);
    context.fill();
    context.closePath();
}
function Pointer() { //創(chuàng)建指針
    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)

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

感謝各位的閱讀！看完上述內(nèi)容，你們對html5使用canvas繪制“鐘表”圖案的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)站欄目：html5使用canvas繪制“鐘表”圖案的方法-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article38/eigpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、域名注冊、定制開發(fā)、企業(yè)建站、自適應(yīng)網(wǎng)站、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容