巧婦難為無米之炊，想寫功能但是沒有好看的設計，邊寫邊設計效率又不夠高。mastergoAi生成的頁面又不夠好看，而且每月給的免費積分用得又超快，so決定自給自足。能有多難，先做，做了再改。

于是決定踏足設計，本期話題新手如何用mastergo設計小程序頁面。

先去小紅書上找找模子，看能否復原。摸了一晚上，感覺效果還行，比ai生成的要好看那么一點。只是想畫個時鐘出來不知道怎么畫好，還的看怎么用canvas實現時鐘動畫。

附上mastergo網址：MasterGo 莫高設計 - AI 時代的數字界面生產平臺

有了UI頁面畫起來就是快多了

今天用canvas繪制了時鐘，然后調整了下整體的布局更簡潔直觀了

另外再附上canvas繪制時鐘代碼，canvas越寫越有意思了

// components/stars/stars.ts
let timer = null
Component({lifetimes: {attached() {this.createSelectorQuery().select("#myCanvas2").fields({node: true,size: true}).exec(res => this.init(res));},detached() {if (timer) {clearInterval(timer)}}},/*** 組件的方法列表*/methods: {init(res) {const width = res[0].widthconst height = res[0].height// 設置畫布寬高const canvas = res[0].nodeconst ctx = canvas.getContext('2d')canvas.width = widthcanvas.height = heightconst r = width / 2const hourNeedle = r * 1 / 2const minuteNeedle = r * 2.5 / 4const secondNeedle = r * 4 / 5// 幀渲染回調const draw = () => {const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds();const secondDeg = (second / 60) * Math.PI * 2;const minuteDeg = ((second / 60 + minute) / 60) * Math.PI * 2;const hourDeg = ((((second / 60 + minute) / 60) + hour) / 12) * Math.PI * 2;this.render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle)// 注冊下一幀渲染// canvas.requestAnimationFrame(draw)}timer = setInterval(() => {draw()}, 1000)},//畫背景框renderCircle(ctx, width) {ctx.beginPath()ctx.lineWidth = '1'ctx.arc(width / 2, width / 2, width / 2 - 2, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.beginPath()ctx.arc(width / 2, width / 2, width / 2 - 6, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.beginPath()ctx.arc(width / 2, width / 2, 3, 2, 4 * Math.PI);ctx.strokeStyle = '#000'ctx.stroke()ctx.fillStyle = '#000'ctx.fill()let count = 0while (count < 60) {const deg = (Math.PI / 30) * countconst r = width / 2 - 6const r1 = r - 4const r2 = r - 8const r3 = r - 18let R = r1if (count % 5 == 0) {R = r2let word = count / 5 == 0 ? 12 : count / 5let w = ctx.measureText(word).width;ctx.fillText(word, width / 2 + r3 * Math.sin(deg) - w / 2, width / 2 - r3 * Math.cos(deg) + w / 2)}ctx.beginPath()ctx.moveTo(width / 2 + r * Math.sin(deg), width / 2 - r * Math.cos(deg))ctx.lineTo(width / 2 + R * Math.sin(deg), width / 2 - R * Math.cos(deg))ctx.strokeStyle = '#000'ctx.stroke()count++}ctx.font = '12px bold'},// 畫時針render(ctx, width, height, secondDeg, secondNeedle, minuteDeg, minuteNeedle, hourDeg, hourNeedle) {ctx.clearRect(0, 0, width, height)this.renderCircle(ctx, width)ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(minuteDeg), width / 2 - (-10) * Math.cos(minuteDeg));ctx.lineTo(width / 2 + minuteNeedle * Math.sin(minuteDeg), width / 2 - minuteNeedle * Math.cos(minuteDeg));ctx.lineCap = 'round'ctx.lineWidth = '2'ctx.stroke();ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(hourDeg), width / 2 - (-10) * Math.cos(hourDeg));ctx.lineTo(width / 2 + hourNeedle * Math.sin(hourDeg), width / 2 - hourNeedle * Math.cos(hourDeg));ctx.lineCap = 'round'ctx.lineWidth = '3'ctx.stroke();ctx.beginPath()ctx.moveTo(width / 2 + (-10) * Math.sin(secondDeg), width / 2 - (-10) * Math.cos(secondDeg));ctx.lineTo(width / 2 + secondNeedle * Math.sin(secondDeg), width / 2 - secondNeedle * Math.cos(secondDeg));ctx.lineCap = 'round'ctx.lineWidth = '1'ctx.strokeStyle = 'red'ctx.stroke();},}
})

時鐘效果可查看微信小程序“哆喵口袋”