js实现刻度

实现刻度的方法

使用Canvas绘制刻度

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawScale(startX, startY, length, interval, count) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(startX + length, startY);
    ctx.stroke();

    for (let i = 0; i <= count; i++) {
        const x = startX + i * interval;
        ctx.moveTo(x, startY);
        ctx.lineTo(x, startY - 10);
        ctx.stroke();
    }
}

drawScale(50, 100, 300, 30, 10);

使用SVG实现刻度

const svg = document.getElementById('svg');

function createScale(startX, startY, length, interval, count) {
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', startX);
    line.setAttribute('y1', startY);
    line.setAttribute('x2', startX + length);
    line.setAttribute('y2', startY);
    line.setAttribute('stroke', 'black');
    svg.appendChild(line);

    for (let i = 0; i <= count; i++) {
        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tick.setAttribute('x1', startX + i * interval);
        tick.setAttribute('y1', startY);
        tick.setAttribute('x2', startX + i * interval);
        tick.setAttribute('y2', startY - 10);
        tick.setAttribute('stroke', 'black');
        svg.appendChild(tick);
    }
}

createScale(50, 100, 300, 30, 10);

使用HTML和CSS实现刻度

const scaleContainer = document.getElementById('scale-container');

function createHTMLScale(length, interval, count) {
    scaleContainer.style.width = `${length}px`;
    scaleContainer.style.height = '20px';
    scaleContainer.style.position = 'relative';
    scaleContainer.style.borderBottom = '1px solid black';

    for (let i = 0; i <= count; i++) {
        const tick = document.createElement('div');
        tick.style.position = 'absolute';
        tick.style.left = `${i * interval}px`;
        tick.style.bottom = '0';
        tick.style.width = '1px';
        tick.style.height = '10px';
        tick.style.backgroundColor = 'black';
        scaleContainer.appendChild(tick);
    }
}

createHTMLScale(300, 30, 10);

刻度数值标注

function addLabels(startX, startY, interval, count, unit) {
    for (let i = 0; i <= count; i++) {
        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        label.setAttribute('x', startX + i * interval);
        label.setAttribute('y', startY - 15);
        label.setAttribute('text-anchor', 'middle');
        label.textContent = i * unit;
        svg.appendChild(label);
    }
}

addLabels(50, 100, 30, 10, 5);

响应式刻度调整

function responsiveScale() {
    const width = window.innerWidth * 0.8;
    const interval = width / 10;
    drawScale(50, 100, width, interval, 10);
}

window.addEventListener('resize', responsiveScale);