当前位置：首页 > JavaScript

js实现尺子

2026-04-06 12:06:59JavaScript

实现尺子功能的核心思路

在JavaScript中实现尺子功能通常需要结合HTML5的Canvas绘图API或CSS布局。尺子可以用于测量网页元素、展示刻度或辅助设计。以下是两种常见的实现方式：

基于Canvas的刻度尺实现

使用Canvas绘制动态刻度尺，适合需要高精度或自定义样式的场景：

const canvas = document.getElementById('rulerCanvas');
const ctx = canvas.getContext('2d');
const width = 800; // 尺子宽度
const height = 50; // 尺子高度

function drawRuler() {
    ctx.clearRect(0, 0, width, height);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1;

    // 绘制主刻度线
    for (let i = 0; i <= width; i += 50) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, 20);
        ctx.stroke();
        ctx.fillText(i + 'px', i - 10, 35);
    }

    // 绘制次刻度线
    for (let i = 0; i <= width; i += 10) {
        if (i % 50 !== 0) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, 10);
            ctx.stroke();
        }
    }
}

基于CSS的水平尺子实现

使用纯CSS和HTML创建静态尺子，适合简单测量场景：

<div class="ruler">
    <div class="cm"></div>
    <div class="cm"></div>
    <!-- 重复刻度 -->
</div>

<style>
.ruler {
    display: flex;
    height: 30px;
    background: #f5f5f5;
    border-top: 1px solid #999;
}
.cm {
    width: 50px;
    border-left: 1px solid #333;
    position: relative;
}
.cm::after {
    content: attr(data-value);
    position: absolute;
    bottom: -20px;
    left: -10px;
}
</style>

动态交互式尺子实现

结合鼠标事件实现可拖动的测量工具：

document.addEventListener('mousedown', startMeasuring);
document.addEventListener('mousemove', measure);
document.addEventListener('mouseup', endMeasuring);

let startX, ruler;

function startMeasuring(e) {
    startX = e.clientX;
    ruler = document.createElement('div');
    ruler.style.position = 'absolute';
    ruler.style.height = '100vh';
    ruler.style.width = '1px';
    ruler.style.background = 'red';
    ruler.style.left = startX + 'px';
    document.body.appendChild(ruler);
}

function measure(e) {
    if (!ruler) return;
    const currentX = e.clientX;
    const distance = Math.abs(currentX - startX);
    ruler.style.width = distance + 'px';
}

function endMeasuring() {
    if (ruler) document.body.removeChild(ruler);
    ruler = null;
}