canvas時(shí)鐘效果圖：

代碼：

wxml:

<view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'><canvas canvas-id='clock' style='width:100%;height:{{canvasHeight}}px'></canvas> </view>

JS

Page({data: {width: 0,height: 0,showMask: false},onLoad: function (options) {var that = this//獲取系統(tǒng)信息 wx.getSystemInfo({//獲取系統(tǒng)信息成功，將系統(tǒng)窗口的寬高賦給頁(yè)面的寬高 success: function (res) {that.width = res.windowWidththat.height = res.windowHeightthat.setData({canvasWidth: res.windowWidth * 0.9 * 0.52,canvasHeight: res.windowWidth * 0.9 * 0.52 * 0.9819,rightWidth: res.windowWidth * 0.9 * 0.47})}})},onReady: function () {this.drawClock();// 每40ms執(zhí)行一次drawClock()，this.interval = setInterval(this.drawClock, 40);},// 所有的canvas屬性以及Math.sin,Math.cos()等涉及角度的參數(shù)都是用弧度表示// 時(shí)鐘drawClock: function () {let _this = this;const ctx = wx.createCanvasContext('clock');var height = this.height;var width = this.width;// 設(shè)置文字對(duì)應(yīng)的半徑var R = this.data.canvasWidth / 5;ctx.save();// 把原點(diǎn)的位置移動(dòng)到屏幕中間，及寬的一半，高的一半ctx.translate(this.data.canvasWidth / 1.83, this.data.canvasHeight / 1.83);// 畫(huà)外框function drawBackground() {ctx.setStrokeStyle('#4BB5C3');// 設(shè)置線條的粗細(xì)，單位pxctx.setLineWidth(8);// 開(kāi)始路徑ctx.beginPath();// 運(yùn)動(dòng)一個(gè)圓的路徑// arc(x,y,半徑,起始位置，結(jié)束位置，false為順時(shí)針運(yùn)動(dòng))ctx.arc(0, 0, R * 1.7, 0, 2 * Math.PI, false);ctx.closePath();// 描出點(diǎn)的路徑ctx.stroke();};// 畫(huà)時(shí)鐘數(shù)function drawHoursNum() {ctx.setFontSize(20);// 圓的起始位置是從3開(kāi)始的，所以我們從3開(kāi)始填充數(shù)字var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];hours.forEach(function (hour, i) {var rad = (2 * Math.PI / 12) * i;var x = R * Math.cos(rad);var y = R * Math.sin(rad);if (hour == 12) {ctx.fillText(hour, x - 11, y + 6);} else if (hour == 6) {ctx.fillText(hour, x - 5, y + 10);} else if (hour == 3) {ctx.fillText(hour, x, y + 8);} else if (hour == 9) {ctx.fillText(hour, x - 10, y + 8);}else {//ctx.fillText(hour, x - 6, y + 6);}})};// 畫(huà)數(shù)字對(duì)應(yīng)的點(diǎn)function drawdots() {for (let i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = (R + 15) * Math.cos(rad);var y = (R + 15) * Math.sin(rad);ctx.beginPath();// 每5個(gè)點(diǎn)一個(gè)比較大if (i % 5 == 0) {ctx.arc(x, y, 2, 0, 2 * Math.PI, false);} else {// ctx.arc(x, y, 1, 0, 2 * Math.PI, false);}ctx.setFillStyle('black');ctx.fill();}ctx.closePath();}// 畫(huà)時(shí)針function drawHour(hour, minute) {ctx.setStrokeStyle('#000000');// 保存畫(huà)之前的狀態(tài)ctx.save();ctx.beginPath();// 根據(jù)小時(shí)數(shù)確定大的偏移var rad = 2 * Math.PI / 12 * hour;// 根據(jù)分鐘數(shù)確定小的偏移var mrad = 2 * Math.PI / 12 / 60 * minute;// 做旋轉(zhuǎn)ctx.rotate(rad + mrad);ctx.setLineWidth(4);// 設(shè)置線條結(jié)束樣式為圓ctx.setLineCap('round');// 時(shí)針向后延伸8個(gè)px；ctx.moveTo(0, 8);// 一開(kāi)始的位置指向12點(diǎn)的方向，長(zhǎng)度為R/2ctx.lineTo(0, -R / 2);ctx.stroke();ctx.closePath();// 返回畫(huà)之前的狀態(tài)ctx.restore();}// 畫(huà)分針function drawMinute(minute, second) {ctx.save();ctx.beginPath();// 根據(jù)分鐘數(shù)確定大的偏移var rad = 2 * Math.PI / 60 * minute;// 根據(jù)秒數(shù)確定小的偏移var mrad = 2 * Math.PI / 60 / 60 * second;ctx.rotate(rad + mrad);// 分針比時(shí)針細(xì)ctx.setLineWidth(3);ctx.setLineCap('round');ctx.moveTo(0, 10);// 一開(kāi)始的位置指向12點(diǎn)的方向，長(zhǎng)度為3 * R / 4ctx.lineTo(0, -3 * R / 4);ctx.stroke();ctx.closePath();ctx.restore();}// 畫(huà)秒針function drawSecond(second, msecond) {ctx.save();ctx.beginPath();// 根據(jù)秒數(shù)確定大的偏移var rad = 2 * Math.PI / 60 * second;// 1000ms=1s所以這里多除個(gè)1000var mrad = 2 * Math.PI / 60 / 1000 * msecond;ctx.rotate(rad + mrad);ctx.setLineWidth(2);ctx.setStrokeStyle('#4BB5C3');ctx.setLineCap('round');ctx.moveTo(0, 12);ctx.lineTo(0, -R);ctx.stroke();ctx.closePath();ctx.restore();}//畫(huà)出中間那個(gè)灰色的圓function drawDot() {ctx.beginPath();ctx.arc(0, 0, 4, 0, 2 * Math.PI, false);ctx.setFillStyle('#FFF9E6');ctx.setLineWidth(6);ctx.setStrokeStyle('#000000');ctx.stroke();ctx.fill();ctx.closePath();}//畫(huà)蒙層function drawMask() {ctx.restore();ctx.rect(0, 0, width * 0.5, _this.data.canvasHeight);ctx.setFillStyle('rgba(0,0,0,.2)')ctx.fill()}function Clock() {// 實(shí)時(shí)獲取各個(gè)參數(shù)var now = new Date();var hour = now.getHours();var minute = now.getMinutes()var second = now.getSeconds();var msecond = now.getMilliseconds();if (_this.data.showMask) {ctx.scale(0.98,0.98)}// 依次執(zhí)行各個(gè)方法drawBackground();drawHoursNum();drawdots();drawSecond(second, msecond);drawHour(hour, minute);drawMinute(minute, second);drawDot();if (_this.data.showMask) {drawMask();}ctx.draw();}Clock();},goCountdown() {let _this = this;_this.setData({showMask: true})setTimeout(function () {_this.setData({showMask: false})wx.navigateTo({url: '/pages/countdown/countdown',})}, 200)},touchstart: function (e) {console.log(e)this.setData({showMask: true})},touchend: function (e) {this.setData({showMask: false})} })

總結(jié)

以上是生活随笔為你收集整理的微信小程序canvas动态时钟的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。