当前位置：首页 > JavaScript

js实现刻度

2026-02-01 09:28:43JavaScript

刻度实现的基本方法

使用JavaScript实现刻度可以通过Canvas或SVG进行绘制。Canvas适合动态生成的图形，SVG适合需要交互的场景。

Canvas绘制刻度

创建Canvas元素并设置宽高：

<canvas id="scaleCanvas" width="400" height="100"></canvas>

JavaScript代码实现刻度绘制：

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

function drawScale(start, end, interval, majorHeight, minorHeight) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  // 绘制主刻度
  for(let i = start; i <= end; i += interval) {
    const x = (i - start) * (canvas.width / (end - start));
    ctx.moveTo(x, canvas.height);
    ctx.lineTo(x, canvas.height - majorHeight);
    ctx.fillText(i.toString(), x - 5, canvas.height - majorHeight - 5);
  }

  // 绘制次刻度
  for(let i = start; i <= end; i += interval/2) {
    const x = (i - start) * (canvas.width / (end - start));
    ctx.moveTo(x, canvas.height);
    ctx.lineTo(x, canvas.height - minorHeight);
  }

  ctx.stroke();
}

drawScale(0, 100, 10, 20, 10);

SVG实现刻度

创建SVG元素：

<svg id="scaleSVG" width="400" height="100"></svg>

JavaScript代码实现：

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

function createScale(start, end, interval, majorHeight, minorHeight) {
  svg.innerHTML = '';
  const scaleLength = end - start;

  // 创建主刻度
  for(let i = start; i <= end; i += interval) {
    const x = (i - start) * (svg.width.baseVal.value / scaleLength);
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", x);
    line.setAttribute("y1", svg.height.baseVal.value);
    line.setAttribute("x2", x);
    line.setAttribute("y2", svg.height.baseVal.value - majorHeight);
    line.setAttribute("stroke", "black");
    svg.appendChild(line);

    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.setAttribute("x", x - 5);
    text.setAttribute("y", svg.height.baseVal.value - majorHeight - 5);
    text.textContent = i.toString();
    svg.appendChild(text);
  }

  // 创建次刻度
  for(let i = start; i <= end; i += interval/2) {
    const x = (i - start) * (svg.width.baseVal.value / scaleLength);
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", x);
    line.setAttribute("y1", svg.height.baseVal.value);
    line.setAttribute("x2", x);
    line.setAttribute("y2", svg.height.baseVal.value - minorHeight);
    line.setAttribute("stroke", "black");
    svg.appendChild(line);
  }
}

createScale(0, 100, 10, 20, 10);

动态刻度实现

实现可交互的动态刻度尺：

const scaleContainer = document.getElementById('scaleContainer');
let isDragging = false;
let startX = 0;
let scrollLeft = 0;

scaleContainer.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.pageX - scaleContainer.offsetLeft;
  scrollLeft = scaleContainer.scrollLeft;
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

window.addEventListener('mousemove', (e) => {
  if(!isDragging) return;
  e.preventDefault();
  const x = e.pageX - scaleContainer.offsetLeft;
  const walk = (x - startX) * 2;
  scaleContainer.scrollLeft = scrollLeft - walk;
});

function generateDynamicScale() {
  const scaleWidth = 2000;
  scaleContainer.style.width = '400px';
  scaleContainer.style.overflowX = 'scroll';
  scaleContainer.innerHTML = `
    <div style="width:${scaleWidth}px; height:50px; position:relative; border-top:1px solid #000">
      ${Array.from({length: scaleWidth/10}, (_, i) => 
        i % 10 === 0 ? 
          `<div style="position:absolute; left:${i*10}px; top:0; height:20px; width:1px; background:#000"></div>
           <div style="position:absolute; left:${i*10-5}px; top:25px;">${i}</div>` :
          `<div style="position:absolute; left:${i*10}px; top:10px; height:10px; width:1px; background:#ccc"></div>`
      ).join('')}
    </div>
  `;
}

generateDynamicScale();

响应式刻度尺

实现适应不同屏幕尺寸的刻度尺：

function responsiveScale() {
  const container = document.getElementById('responsiveScale');
  const width = window.innerWidth * 0.8;
  container.style.width = `${width}px`;

  const majorInterval = width > 600 ? 50 : 100;
  const minorInterval = majorInterval / 5;

  container.innerHTML = `
    <svg width="100%" height="50">
      ${Array.from({length: Math.floor(width/majorInterval)}, (_, i) => 
        `<line x1="${i*majorInterval}" y1="50" x2="${i*majorInterval}" y2="30" stroke="#000" stroke-width="1"/>
         <text x="${i*majorInterval-10}" y="25">${i*majorInterval}</text>
         ${Array.from({length: 4}, (_, j) => 
           `<line x1="${i*majorInterval + (j+1)*minorInterval}" y1="50" 
                 x2="${i*majorInterval + (j+1)*minorInterval}" y2="40" stroke="#999" stroke-width="0.5"/>`
         ).join('')}`
      ).join('')}
    </svg>
  `;
}

window.addEventListener('resize', responsiveScale);
responsiveScale();

以上方法提供了从基础到高级的刻度实现方案，可以根据具体需求选择适合的方式。Canvas方案适合需要频繁更新的动态刻度，SVG方案适合需要交互的场景，而动态和响应式方案则提供了更完善的用户体验。

js实现刻度