欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序入門之繪制時(shí)鐘

 更新時(shí)間:2020年10月22日 15:29:57   作者:yunfeather  
這篇文章主要為大家詳細(xì)介紹了微信小程序入門之繪制時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

微信小程序入門案例——繪制時(shí)鐘,供大家參考,具體內(nèi)容如下

涉及內(nèi)容:canvas、每秒刷新頁面、繪制

目錄結(jié)構(gòu):

pages\index\index.js

Page({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 this.ctx = wx.createCanvasContext('clockCanvas')
 this.drawClock()
 var that = this
 this.interval=setInterval(function(){
 that.drawClock()
 },1000)
 
 },
 
 /**
 * 繪制時(shí)鐘
 */
 drawClock:function(){
 /**
 * 準(zhǔn)備工作
 */
 let width = 300,height=300
 var ctx= this.ctx
 ctx.translate(width/2,height/2)
 ctx.rotate(-Math.PI/2)
 
 /**
 * 繪制時(shí)鐘刻度
 */
 ctx.lineWidth=6
 ctx.lineCap='round'
 for(let i=0;i<12;i++){
 ctx.beginPath()
 ctx.moveTo(80,0)
 ctx.lineTo(100,0)
 ctx.stroke()
 ctx.rotate(Math.PI/6)
 }
 
 
 
 
 ctx.lineWidth=5
 ctx.lineCap='round'
 for(let i = 0;i<60;i++){
 ctx.beginPath()
 ctx.moveTo(88,0)
 ctx.lineTo(100,0)
 ctx.stroke()
 ctx.rotate(Math.PI/30)
 }
 
 
 /**
 * 獲取按當(dāng)前時(shí)間
 */
 let time = this.getTime()
 let h = time[0]
 let m = time[1]
 let s = time[2]
 
 /**
 * 繪制時(shí)鐘指針
 */
 ctx.save()
 ctx.rotate(h * Math.PI/6 + m * Math.PI/360 + s * Math.PI/21600)
 ctx.lineWidth=12
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(60,0)
 ctx.stroke()
 ctx.restore()
 /**
 * 繪制時(shí)鐘分針
 */
 ctx.save()
 ctx.rotate(m * Math.PI/30 + s * Math.PI/1800)
 ctx.lineWidth=8
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(82,0)
 ctx.stroke()
 ctx.restore()
 /**
 * 繪制時(shí)鐘妙針
 */
 ctx.save()
 ctx.rotate(s*Math.PI/30)
 ctx.strokeStyle = 'red'
 ctx.lineWidth = 6
 ctx.beginPath()
 ctx.moveTo(-30,0)
 ctx.lineTo(90,0)
 ctx.stroke()
 
 ctx.fillStyle='red'
 ctx.beginPath()
 ctx.arc(0,0,10,0,Math.PI*2,true)
 ctx.fill()
 ctx.restore()
 
 
 /**
 * 繪制
 */
 ctx.draw()
 
 /**
 * 更新頁面顯示時(shí)間
 */
 this.setData({
 h:h>9?h:'0'+h,
 m:m>9?m:'0'+m,
 s:s>9?s:'0'+s
 })
 },
 getTime:function(){
 let now = new Date()
 let time=[]
 time[0]=now.getHours()
 time[1]=now.getMinutes()
 time[2]=now.getSeconds()
 
 if(time[0]>12){
 time[0]-=12
 }
 return time
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () {
 clearInterval(this.interval)
 },
 
 /**
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 }
}) 

pages\index\index.wxml

<view class="container">
 <text>My Clock</text>
 <canvas canvas-id="clockCanvas"></canvas>
 <text>{{h}}:{{m}}:{{s}}</text>
</view>

pages\index\index.wxss

.container{
 height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
}
text{
 font-size: 40pt;
 font-weight: bold;
}
canvas{
 width: 600rpx;
 height: 600rpx;
 
} 

app.js

App({
 
 /**
 * 當(dāng)小程序初始化完成時(shí),會觸發(fā) onLaunch(全局只觸發(fā)一次)
 */
 onLaunch: function () {
 
 },
 
 /**
 * 當(dāng)小程序啟動(dòng),或從后臺進(jìn)入前臺顯示,會觸發(fā) onShow
 */
 onShow: function (options) {
 
 },
 
 /**
 * 當(dāng)小程序從前臺進(jìn)入后臺,會觸發(fā) onHide
 */
 onHide: function () {
 
 },
 
 /**
 * 當(dāng)小程序發(fā)生腳本錯(cuò)誤,或者 api 調(diào)用失敗時(shí),會觸發(fā) onError 并帶上錯(cuò)誤信息
 */
 onError: function (msg) {
 
 }
}) 

app.json

{
 "pages":[
 "pages/index/index"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "我的時(shí)鐘",
 "navigationBarTextStyle":"black"
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

運(yùn)行截圖:

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript中innerHTML 獲取或替換html內(nèi)容的實(shí)現(xiàn)代碼

    javascript中innerHTML 獲取或替換html內(nèi)容的實(shí)現(xiàn)代碼

    這篇文章主要介紹了javascript中innerHTML 獲取或替換html內(nèi)容,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-03
  • JavaScript 中的replace方法說明

    JavaScript 中的replace方法說明

    JavaScript 中的replace方法說明...
    2007-04-04
  • js+css實(shí)現(xiàn)超簡潔的二級下拉菜單效果代碼

    js+css實(shí)現(xiàn)超簡潔的二級下拉菜單效果代碼

    這篇文章主要介紹了js+css實(shí)現(xiàn)超簡潔的二級下拉菜單效果代碼,通過非常簡單的JavaScript遍歷頁面元素及動(dòng)態(tài)設(shè)置樣式達(dá)到二級下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解

    JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解

    這篇文章主要為大家介紹了JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • JS Replace()的高級使用方法介紹

    JS Replace()的高級使用方法介紹

    這篇文章介紹了,js中的Replace()的一些高級的使用方法,有需要的朋友可以參考一下
    2013-06-06
  • js仿淘寶商品放大預(yù)覽功能

    js仿淘寶商品放大預(yù)覽功能

    本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • JavaScript執(zhí)行效率與性能提升方案

    JavaScript執(zhí)行效率與性能提升方案

    如何提升JavaScript執(zhí)行效率與性能在前端開發(fā)中位于一個(gè)很重要的地方,這節(jié)來研究下如何在平時(shí)做項(xiàng)目過程中,提升JavaScript性能與運(yùn)行效率,需要的朋友可以參考下
    2012-12-12
  • JS代碼判斷集錦大全

    JS代碼判斷集錦大全

    本文通過實(shí)例代碼給大家介紹了js代碼判斷的方法,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2007-12-12
  • 基于ajax和jsonp的原生封裝(實(shí)例)

    基于ajax和jsonp的原生封裝(實(shí)例)

    下面小編就為大家?guī)硪黄赼jax和jsonp的原生封裝(實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • js屏蔽退格鍵(backspace或者叫后退鍵與F5)

    js屏蔽退格鍵(backspace或者叫后退鍵與F5)

    今天有工作人員反饋后臺編輯文章的時(shí)候,多按了幾下退格鍵,然后當(dāng)前編輯的頁面都返回到上一頁了,導(dǎo)致剛剛添加的內(nèi)容全部丟失,今天正好有空給整理一下
    2019-02-02

最新評論