在线刻度尺
时间: 2023-06-29 11:16:48 浏览: 323
你可以使用微信小程序中的canvas组件来创建一个在线刻度尺。以下是一个简单的示例代码:
```html
<canvas canvas-id="ruler" style="width: 100%; height: 200px;"></canvas>
```
```javascript
Page({
onReady() {
const ctx = wx.createCanvasContext('ruler')
const width = wx.getSystemInfoSync().windowWidth
const height = 200
const scaleWidth = 10 // 刻度宽度
const scaleHeight = 20 // 刻度高度
const scaleMargin = 10 // 刻度间距
const scaleCount = Math.floor(width / (scaleWidth + scaleMargin)) // 刻度数量
const totalWidth = scaleCount * (scaleWidth + scaleMargin) - scaleMargin // 总宽度
for (let i = 0; i <= scaleCount; i++) {
const x = (width - totalWidth) / 2 + i * (scaleWidth + scaleMargin)
const isMajorScale = i % 5 === 0 // 是否是主刻度
ctx.beginPath()
ctx.rect(x, 0, scaleWidth, isMajorScale ? scaleHeight : scaleHeight / 2)
ctx.setFillStyle(isMajorScale ? '#000' : '#999')
ctx.fill()
if (isMajorScale) {
const text = `${i}cm`
const textWidth = ctx.measureText(text).width
const textHeight = 20
const textX = x - textWidth / 2
const textY = scaleHeight + textHeight
ctx.fillText(text, textX, textY)
}
}
ctx.draw()
},
})
```
该示例代码会在canvas上绘制一条横向的刻度尺,支持自适应屏幕宽度和刻度数量。你可以根据需要修改刻度宽度、高度、间距等参数,从而实现不同样式的刻度尺。