99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

javascriptcanvas封裝動(dòng)態(tài)時(shí)鐘-創(chuàng)新互聯(lián)

本文實(shí)例為大家分享了canvas封裝動(dòng)態(tài)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)是專業(yè)的寶興網(wǎng)站建設(shè)公司，寶興接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行寶興網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>canvas繪制動(dòng)態(tài)時(shí)鐘</title>
 <style>
 #clock {
  display: block;
  margin: 30px auto;
 }
 </style>
</head>

<body>
 <canvas id="clock" width="200" height="200"></canvas>
 <script>

 function canvasClock(canvasClockObj) {
  return (function (canvasClockObj) {
  var ctx = canvasClockObj.dom.getContext('2d')
  let width = ctx.canvas.width
  let height = ctx.canvas.height
  let r = width > height ? height / 2 : width / 2

  // 繪制背景板
  function drawBackground() {
   // 繪制外圈圓環(huán)
   ctx.save() // 每次開始前都要保存當(dāng)前畫布狀態(tài)，以免移動(dòng)畫布影響后續(xù)繪制
   ctx.translate(r, r) // 設(shè)置起始點(diǎn)為圓心
   ctx.beginPath() // 每次開始繪制前必須開始一條路徑
   ctx.lineWidth = 10 // 設(shè)置繪線的寬度
   ctx.strokeStyle = canvasClockObj.outerRing
   ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) // 畫一個(gè)整圓
   ctx.stroke() // 對(duì)圓進(jìn)行描邊
   ctx.strokeStyle = '#000'
   // 繪制分鐘 和 小時(shí)
   var minuteNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60]
   minuteNumbers.map(function (number, i) {
   var rad = 2 * Math.PI / 60 * i
   var x = Math.cos(rad) * (r - 17) // 獲取每分鐘的x軸坐標(biāo)
   var y = Math.sin(rad) * (r - 17) // 獲取每分鐘的y軸坐標(biāo)
   ctx.beginPath() // 每次開始繪制前必須開始一條路徑
   ctx.fillStyle = '#ccc'
   ctx.arc(x, y, 2, 0, 2 * Math.PI, false)
   ctx.fill()
   })
   var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
   hourNumbers.map(function (number, i) {
   var rad = 2 * Math.PI / 12 * i
   var x = Math.cos(rad) * (r - 30)
   var y = Math.sin(rad) * (r - 30)
   var x1 = Math.cos(rad) * (r - 17)
   var y1 = Math.sin(rad) * (r - 17)
   ctx.beginPath() // 每次開始繪制前必須開始一條路徑
   ctx.fillStyle = canvasClockObj.hourColor ? canvasClockObj.hourColor :'#000' // 設(shè)置 小時(shí)的顏色
   ctx.textAlign = 'center' // 使文字左右居中
   ctx.textBaseline = 'middle' // 使文字上下居中
   ctx.font = 14 + 'px Arial'
   ctx.fillText(number, x, y)
   ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false)
   ctx.fill()
   })
  }
  drawBackground()

  // 繪制圓心
  function drawDot() {
   ctx.beginPath()
   ctx.fillStyle = '#fff'
   ctx.lineWidth = 1
   ctx.arc(0, 0, 3, 2 * Math.PI, false)
   ctx.fill()
  }
  // 繪制時(shí)針
  function drawHour(hour, minute) {
   ctx.save()
   ctx.beginPath()
   var hrad = Math.PI / 12 * hour * 2
   var mrad = Math.PI / 12 / 60 * minute * 2
   ctx.rotate(hrad + mrad)
   ctx.lineWidth = 4
   ctx.moveTo(0, 10)
   ctx.lineTo(0, -r / 2.5)
   ctx.lineCap = 'round'
   ctx.stroke()
   ctx.restore()
  }
  // 繪制分針
  function drawMinute(minute, second) {
   ctx.save()
   ctx.beginPath()
   var mrad = Math.PI / 60 * minute * 2
   var srad = Math.PI / 60 / 60 * second * 2
   ctx.rotate(srad + mrad)
   ctx.lineWidth = 0.5
   ctx.lineJoin = 'round'
   ctx.fillStyle = '#000'
   ctx.moveTo(2, 10)
   ctx.lineTo(0, -r / 1.7)
   ctx.lineTo(-2, 10)
   ctx.lineTo(2, 10)
   ctx.lineCap = 'round'
   ctx.fill()
   ctx.restore()
  }
  // 繪制秒針
  function drawSecond(second) {
   ctx.save()
   ctx.beginPath()
   var srad = Math.PI / 30 * second
   ctx.rotate(srad)
   ctx.lineWidth = 0.5
   ctx.lineJoin = 'round'
   ctx.fillStyle = canvasClockObj.secondHand ? canvasClockObj.secondHand : '#f00'
   ctx.moveTo(2, 10)
   ctx.lineTo(0, -r / 1.2)
   ctx.lineTo(-2, 10)
   ctx.lineTo(2, 10)
   ctx.lineCap = 'round'
   ctx.fill()
   ctx.restore()
  }
  // 使指針動(dòng)起來
  function draw() {
   ctx.translate(-r, -r)
   ctx.clearRect(0, 0, width, height)
   var now = new Date()
   var hour = now.getHours()
   var minute = now.getMinutes()
   var second = now.getSeconds()
   drawBackground()        //繪制圓盤背景
   drawHour(hour, minute);       //繪制時(shí)針
   drawMinute(minute,second);        //繪制分針
   drawSecond(second);        //繪制秒針
   drawDot();           //繪制原點(diǎn) 
  }
  draw()
  setInterval(draw, 1000);
  })(canvasClockObj)
 }
 canvasClock({
  dom:document.getElementById('clock'), // 必填項(xiàng)： canvas節(jié)點(diǎn)
  // outerRing:'purple', // 外圈圓環(huán)顏色 默認(rèn)值： #000 
  // hourColor:'skyblue', // 小時(shí)的顏色 默認(rèn)值 #000
  // secondHand:'yellow' // 秒針的顏色 默認(rèn)值： #f00
 })
 </script>
</body>

</html>

分享題目：javascriptcanvas封裝動(dòng)態(tài)時(shí)鐘-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.yijiale78.com/article48/cdpihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、軟件開發(fā)、企業(yè)建站、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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í)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站