微信小程序canvas動(dòng)態(tài)時(shí)鐘
更新時(shí)間：2020年10月22日 15:29:43 作者：把你打的喵喵叫
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序canvas動(dòng)態(tài)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
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)窗口的寬高賦給頁面的寬高
success: function (res) {
that.width = res.windowWidth
that.height = res.windowHeight
that.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);
// 畫外框
function drawBackground() {
ctx.setStrokeStyle('#4BB5C3');
// 設(shè)置線條的粗細(xì)，單位px
ctx.setLineWidth(8);
// 開始路徑
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();
};
// 畫時(shí)鐘數(shù)
function drawHoursNum() {
ctx.setFontSize(20);
// 圓的起始位置是從3開始的，所以我們從3開始填充數(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);
}
})
};
// 畫數(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();
}
// 畫時(shí)針
function drawHour(hour, minute) {
ctx.setStrokeStyle('#000000');
// 保存畫之前的狀態(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);
// 一開始的位置指向12點(diǎn)的方向，長(zhǎng)度為R/2
ctx.lineTo(0, -R / 2);
ctx.stroke();
ctx.closePath();
// 返回畫之前的狀態(tài)
ctx.restore();
}
// 畫分針
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);
// 一開始的位置指向12點(diǎn)的方向，長(zhǎng)度為3 * R / 4
ctx.lineTo(0, -3 * R / 4);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 畫秒針
function drawSecond(second, msecond) {
ctx.save();
ctx.beginPath();
// 根據(jù)秒數(shù)確定大的偏移
var rad = 2 * Math.PI / 60 * second;
// 1000ms=1s所以這里多除個(gè)1000
var 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();
}
//畫出中間那個(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();
}
//畫蒙層
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
})
}
})
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript圖像處理—閾值函數(shù)實(shí)例應(yīng)用
閾值是最簡(jiǎn)單的圖像分割方法,接下來將介紹五種閾值類型感興趣的朋友可以參考下2013-01-01
javascript 數(shù)組去重復(fù)(在線去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個(gè)數(shù)組里面，然后再去重復(fù)，這里簡(jiǎn)單為大家整理一下2016-12-12
JS獲取scrollHeight問題想到的標(biāo)準(zhǔn)問題
如果沒有文檔聲明可以用 document.body.scrollHeight,如果有文檔聲明必須用 document.documentElement.scrollHeight關(guān)于這方面的東西2007-05-05
異步動(dòng)態(tài)加載JS并運(yùn)行(示例代碼)
這篇文章主要是對(duì)異步動(dòng)態(tài)加載JS并運(yùn)行的示例代碼進(jìn)行了介紹。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了一篇文章讓你搞懂JavaScript 原型和原型鏈，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-11-11
原生js的ajax和解決跨域的jsonp(實(shí)例講解)
下面小編就為大家?guī)硪黄鷍s的ajax和解決跨域的jsonp(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
詳解webpack之scss和postcss-loader的配置
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
使用戶點(diǎn)擊后退按鈕使效三行代碼...2007-07-07
微信小程序wxml不能使用Array.includes條件判斷解決方法
這篇文章主要為大家介紹了微信小程序wxml不能使用Array.includes條件判斷解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能
這篇文章主要介紹了JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能,本文給出了HTML5解決方案、老舊瀏覽器的寫法等方法,需要的朋友可以參考下2014-11-11