canvas 刻度尺
时间: 2023-12-09 09:37:00 浏览: 137
Canvas刻度尺是一种基于HTML5技术实现的尺子,可以用于测量和记物体的长度。以下是一个简单的Canvas刻度尺的实现方法:
```javascript
const canvas = document.getElementById('ruler') as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
// 设置画布宽度和高度
canvas.width = 500;
canvas.height = 50;
// 绘制刻度线和标记
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
for (let i = 0; i <= 500; i += 10) {
if (i % 50 === 0) {
ctx.moveTo(i, 40);
ctx.lineTo(i, 30);
ctx.fillText(i.toString(), i - 5, 20);
} else if (i % 25 === 0) {
ctx.moveTo(i, 40);
ctx.lineTo(i, 35);
} else {
ctx.moveTo(i, 40);
ctx.lineTo(i, 38);
}
}
ctx.stroke();
```
上述代码中,我们首先获取了一个id为“ruler”的Canvas元素,并获取了它的2D上下文。然后,我们设置了画布的宽度和高度,并使用beginPath()方法开始绘制路径。接下来,我们使用moveTo()和lineTo()方法绘制了刻度线,并使用fillText()方法添加了标记。最后,我们使用stroke()方法绘制了路径。
阅读全文