鸿蒙-canvas-画时钟 - IT评测·应用市场-qidao123.com

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

复制代码

struct ClockViewTest {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private canvasRendering: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Canvas(this.canvasRendering).width("100%").height("100%")
.onReady(() => {
let width = this.canvasRendering.width
let height = this.canvasRendering.height
let centerX = width / 2
let centerY = height / 2
//取长宽中小的一个做直径
let maxRadius = Math.min(width, height) / 2
//设置线的粗细
this.canvasRendering.lineWidth = 4
this.canvasRendering.arc(centerX, centerY, maxRadius-50, 0, 1, false)
//设置线的颜色
this.canvasRendering.strokeStyle = "#ff0000"
this.canvasRendering.stroke()
this.canvasRendering.beginPath()
this.canvasRendering.arc(centerX, centerY, maxRadius - 30, 0, 1, true)
//设置线的颜色
this.canvasRendering.strokeStyle = "#00ff00"
this.canvasRendering.stroke()
})
}
}

复制代码

Canvas(this.canvasRendering).width("100%").height("100%")
.onReady(() => {
let width = this.canvasRendering.width
let height = this.canvasRendering.height
let centerX = width / 2
let centerY = height / 2
//取长宽中小的一个做直径
let maxRadius = Math.min(centerX, centerY)
//留一些外边距
let outerCircleRadius = maxRadius - 20
this.canvasRendering.strokeStyle = "#1b91e0"
this.canvasRendering.lineWidth = 2
//最中间的小圈圈
this.canvasRendering.arc(centerX, centerY, 10, 0, Math.PI * 2, false)
this.canvasRendering.stroke()
//画内圈
this.canvasRendering.beginPath()
let innerCircleRadius = outerCircleRadius -20
this.canvasRendering.arc(centerX, centerY, innerCircleRadius, 0, Math.PI * 2, false)
this.canvasRendering.stroke()
//画外圈
this.canvasRendering.beginPath()
this.canvasRendering.arc(centerX, centerY, outerCircleRadius, 0, Math.PI * 2, false);
this.canvasRendering.stroke()
})

复制代码

//画 60 个格子，5 的倍数则线条粗一些
let perMinuteDegree = Math.PI * 2 / 60
for (let i = 1;i <= 60; i++) {
//结束坐标，也就是在外圆上的点
let endX = centerX + Math.sin(i * perMinuteDegree) * outerCircleRadius
let endY = centerY + Math.cos(i * perMinuteDegree + Math.PI) * outerCircleRadius
//起始坐标，也就是在内圆上的点
let startX = centerX + Math.sin(i * perMinuteDegree) * innerCircleRadius
let startY = centerY + Math.cos(i * perMinuteDegree + Math.PI) * innerCircleRadius
this.canvasRendering.strokeStyle = "#000000"
let path2D = new Path2D()
path2D.moveTo(startX, startY)
path2D.lineTo(endX, endY)
if (i % 5 == 0) {
this.canvasRendering.lineWidth = 6
} else {
this.canvasRendering.lineWidth = 2
}
this.canvasRendering.stroke(path2D)
}

复制代码

//画 1~12 数字圆形分布
this.canvasRendering.font = "40px"
let perNumberDegree = Math.PI * 2 / 12
let numberRadius = outerCircleRadius - 40
for (let i = 1;i <= 12; i++) {
let x = centerX + Math.sin(i * perNumberDegree) * numberRadius
let y = centerY + Math.cos(i * perNumberDegree + Math.PI) * numberRadius
let text: string = i + ""
this.canvasRendering.fillStyle = "#000000"
let textMetrics: TextMetrics = this.canvasRendering.measureText(text)
//填充文字时，传入的坐标是文字的左下角坐标
this.canvasRendering.fillText(text, x-textMetrics.width/2 , y+textMetrics.height/2)
//把下面这两行注释掉就没有小方块了
this.canvasRendering.fillStyle = "#aaff6134"
this.canvasRendering.fillRect(x,y,textMetrics.width,textMetrics.height)
}

复制代码

Canvas(this.canvasRenderingClock).width("100%").height("100%").onReady(() => {
this.timer = setInterval(function(){
let date: Date = new Date()
this.minute = date.getMinutes()
this.hour = date.getHours()
this.second = date.getSeconds()
this.draw()
}.bind(this), 500)
})

复制代码

private draw() {
清空一下画布
this.canvasRenderingClock.clearRect(0, 0, this.centerX * 2, this.centerY * 2)
//画秒针
//计算秒针的角度
let secondDegree = Math.PI * 2 / 60 * this.second
let secondStartX = this.centerX
let secondStartY = this.centerY
let secondEndX = this.centerX + Math.sin(secondDegree) * this.innerCircleRadius
let secondEndY = this.centerY + Math.cos(secondDegree + Math.PI) * this.innerCircleRadius
let secondPath = new Path2D()
secondPath.moveTo(secondStartX, secondStartY)
secondPath.lineTo(secondEndX, secondEndY)
this.canvasRenderingClock.lineWidth = 2
this.canvasRenderingClock.stroke(secondPath)
//画分针颜色弄点透明度，要不然重合的时候看不清楚
//秒针走一圈，分针走一格，其实可以忽略不计
let minuteDegree = Math.PI * 2 / 60 * this.minute
let minuteStartX = this.centerX
let minuteStartY = this.centerY
let minuteEndX = this.centerX + Math.sin(minuteDegree) * (this.innerCircleRadius / 5 * 4)
let minuteEndY = this.centerY + Math.cos(minuteDegree + Math.PI) * (this.innerCircleRadius / 5 * 4)
let minutePath = new Path2D()
minutePath.moveTo(minuteStartX, minuteStartY)
minutePath.lineTo(minuteEndX, minuteEndY)
this.canvasRenderingClock.strokeStyle = "#aa1b91e0"
this.canvasRenderingClock.lineWidth = 4
this.canvasRenderingClock.stroke(minutePath)
//画时针
//分针走一圈，时针走 5 小格
let hourDegree = Math.PI * 2 / 12 * this.hour + this.minute / 60 * Math.PI * 2 / 12
let hourStartX = this.centerX
let hourStartY = this.centerY
let hourEndX = this.centerX + Math.sin(hourDegree) * (this.innerCircleRadius / 4 * 3)
let hourEndY = this.centerY + Math.cos(hourDegree + Math.PI) * (this.innerCircleRadius / 4 * 3)
let hourPath = new Path2D()
hourPath.moveTo(hourStartX, hourStartY)
hourPath.lineTo(hourEndX, hourEndY)
this.canvasRenderingClock.lineWidth = 6
this.canvasRenderingClock.strokeStyle = "#aa39d167"
this.canvasRenderingClock.stroke(hourPath)
}

复制代码