WeChatアプレットはcanvasを使って時計を描きます。
4976 ワード
本稿の例では、WeChatアプレットはcanvasを使って時計の具体的なコードを描いています。参考にしてください。具体的な内容は以下の通りです。
アナログ時計
canvasを使って時計を描いて、アナログ時計の機能を実現して、時計の時間はシステムの時間と一致していて、目盛りは24時間制を12時間制に変えて、それぞれ中心円、外側の層の大きい円、分針、時計回り、秒針を描画しなければなりません。
効果図は以下の通りです
コードは以下の通りです
index.wxml
アナログ時計
canvasを使って時計を描いて、アナログ時計の機能を実現して、時計の時間はシステムの時間と一致していて、目盛りは24時間制を12時間制に変えて、それぞれ中心円、外側の層の大きい円、分針、時計回り、秒針を描画しなければなりません。
効果図は以下の通りです
コードは以下の通りです
index.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
/**index.wxss**/
.mycanvas {
width: 100%;
height: 100%;
position: fixed;
}
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()
}
}
})