微信小程序使用canvas繪制鐘表
本文實例為大傢分享瞭微信小程序使用canvas繪制鐘表的具體代碼,供大傢參考,具體內容如下
模擬時鐘
利用canvas繪制時鐘,實現模擬時鐘的功能,鐘表時間與系統時間保持一致,刻度將24小時制轉換為12小時制,需要分別繪圖出中心圓、外層大圓、分針、時針、秒針。
效果圖如下:
代碼如下:
index.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
index.wxss
/**index.wxss**/ .mycanvas { width: 100%; height: 100%; position: fixed; }
index.js
Page({ width: 0, //窗口寬度 height: 0, //窗口高度 onLoad: function () { // 獲取系統信息 wx.getSystemInfo({ // 獲取系統信息成功,保存獲取到的系統窗口的寬高 success: res => { // console.log(res) this.width = res.windowWidth this.height = res.windowHeight } }) }, timer: null, //定時器 onReady: function(){ //創建ctx實例 var ctx = wx.createCanvasContext('myCanvas') //將角度轉換為弧度,方便在後面使用 //計算公式:弧度 = 角度*Math.PI / 180 const D6 = 6 * Math.PI / 180 const D30 = 30 * Math.PI / 180 const D90 = 90 * Math.PI / 180 // 獲取寬和高值 var width = this.width, height = this.height // 計算表盤半徑,留出 30px 外邊距 var radius = width / 2 -30 // 每秒繪制一次 draw() this.timer = setInterval(draw, 1000) // 繪制函數 function draw(){ // 設置坐標軸原點為窗口的中心點 ctx.translate(width / 2, height / 2) // 繪制表盤 drawClock(ctx,radius) // 繪制指針 drawHand(ctx, radius) //執行繪制 ctx.draw() } // 繪制表盤部分 function drawClock(ctx, radius){ // 繪制大圓 // 大圓的半徑 radius 線條粗細為2px ctx.setLineWidth(2) //設置線條粗細 ctx.beginPath() //開始一個新路徑 ctx.arc(0, 0, radius, 0, 2 * Math.PI, true) ctx.stroke() //畫線 // 繪制同心圓 // 中心圓的半徑為8px 線條粗細為1px ctx.setLineWidth(1) //設置線條粗細 ctx.beginPath() //開始一個新路徑 ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) ctx.stroke() //畫線 // 繪制大刻度盤 線條粗細為5px ctx.setLineWidth(5) for (var i = 0; i < 12; ++i){ // 以原點為中心順時針(多次調用旋轉的角度會疊加) // 大刻度盤需要繪制12個線條,表示12個小時,每次旋轉30度 ctx.rotate(D30) // 360 / 12 = 30 ctx.beginPath() ctx.moveTo(radius, 0) ctx.moveTo(radius - 15, 0) //大刻度長度15px ctx.stroke() } // 繪制小刻度盤,線條粗細為1px ctx.setLineWidth(1) for(var i = 0; i < 60; ++i){ // 小刻度盤需要繪制60個線條,表示60分鐘或60秒,每次旋轉6度 ctx.rotate(D6) ctx.beginPath() ctx.moveTo(radius, 0) ctx.lineTo(radius - 10, 0) //小刻度盤長度10px ctx.stroke() } //繪制文本 ctx.setFontSize(20) //字號 ctx.textBaseline = 'middle' // 文本垂直居中 // 計算文本距離表盤中心點的半徑r var r = radius - 30 for(var i = 1; i <= 12; ++i){ // 利用三角函數計算文本坐標 var x = r * Math.cos(D30 * i - D90) var y = r * Math.sin(D30 * i - D90) if(i > 10){ // 調整11 和12位置 // 在畫佈上繪制文本 fillText(文本,左上角x坐標,左上角y坐標) ctx.fillText(i, x - 12, y) } else { ctx.fillText(i, x-6, y) } } } //繪制指針部分 function drawHand(ctx, radius){ var t = new Date() // 獲取當前時間 var h = t.getHours() //小時 var m = t.getMinutes() //分 var s = t.getSeconds() // 秒 h = h > 12 ? h -12 :h //將24小時制轉換為12小時制 //時間從三點開始,逆時針旋轉90度,指向12點 ctx.rotate(-D90) //繪制時針 ctx.save() //記錄旋轉狀態 // 計算時針指向的刻度 // 通過 30度 * h 可以計算每個整點的旋轉角度 // 如果時間不是整點,需要使用h + m / 60 + s / 3600 計算準確的偏移度 ctx.rotate(D30 * (h + m / 60 + s / 3600)) ctx.setLineWidth(6) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 2.6, 0) ctx.stroke() ctx.restore() // 繪制分針 ctx.save() ctx.rotate(D6 * (m + s / 60)) ctx.setLineWidth(4) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 1.8, 0) ctx.stroke() ctx.restore() //繪制秒針 ctx.save() ctx.rotate(D6 * s) ctx.setLineWidth(2) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 1.6, 0) ctx.stroke() ctx.restore() } } })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。