bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

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

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

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

一、介紹Canvas

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

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

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

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

顏色和樣式：

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

矩形：

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

路徑：

fill() 填充當(dāng)前繪圖（路徑）
stroke() 繪制已定義的路徑
beginPath() 起始一條路徑，或重置當(dāng)前路徑
moveTo() 把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條
closePath() 創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑
lineTo() 添加一個(gè)新點(diǎn)，然后在畫(huà)布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條
clip() 從原始畫(huà)布剪切任意形狀和尺寸的區(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)前對(duì)齊方式
textBaseline 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線
fillText() 在畫(huà)布上繪制“被填充的”文本
strokeText() 在畫(huà)布上繪制文本（無(wú)填充）
measureText() 返回包含指定文本寬度的對(duì)象

圖像繪制：

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

三、繪制鐘表

首先新建一個(gè)html文件，新建畫(huà)板并且給畫(huà)板增加些樣式，就像這樣

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

然后開(kāi)始操作canvas

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

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

創(chuàng)建表盤(pán)

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();
 //時(shí)針
 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é)束了，我大聲的告訴大家沒(méi)有，現(xiàn)在才是剛剛開(kāi)始，接下來(lái)就是見(jiàn)證奇跡的時(shí)刻。。。

3.最后完成

我們需要把上邊的繪制封裝成方法，然后不停的繪制不停的清除這樣鐘表就動(dòng)起來(lái)了

function dialPlate() { //創(chuàng)建表盤(pán)
    //context.clearRect(-150,-150,400,400);//清除畫(huà)布
    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();
    //時(shí)針
    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)

說(shuō)明：動(dòng)畫(huà)每秒執(zhí)行60次是最好的，所以定時(shí)器才讓他沒(méi)秒執(zhí)行60次。

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

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

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

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)