当前位置：首页 > JavaScript

js实现画框

2026-04-07 02:24:03JavaScript

使用 Canvas API 绘制矩形框

在 HTML 中创建一个 <canvas> 元素，通过 JavaScript 获取其上下文并绘制矩形：

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.strokeStyle = 'red';  // 边框颜色
  ctx.lineWidth = 3;        // 边框宽度
  ctx.strokeRect(50, 50, 200, 100);  // (x, y, width, height)
</script>

使用 CSS 和 DOM 元素创建边框

通过动态创建 DIV 元素并添加 CSS 样式实现画框效果：

const box = document.createElement('div');
box.style.position = 'absolute';
box.style.border = '2px dashed blue';
box.style.left = '100px';
box.style.top = '100px';
box.style.width = '300px';
box.style.height = '150px';
document.body.appendChild(box);

SVG 实现矢量边框

使用 SVG 创建可缩放的矢量边框：

<svg width="400" height="200">
  <rect x="50" y="50" width="300" height="100" 
        stroke="green" stroke-width="4" fill="none" />
</svg>

实现可拖拽调整的画框

结合鼠标事件实现交互式画框：

const canvas = document.getElementById('interactiveCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startX, startY;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  startX = e.offsetX;
  startY = e.offsetY;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = 'purple';
  ctx.lineWidth = 2;
  ctx.strokeRect(
    startX, 
    startY, 
    e.offsetX - startX, 
    e.offsetY - startY
  );
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

带圆角的边框实现

使用 Canvas 或 CSS 创建圆角边框：

js实现画框

// Canvas 圆角矩形
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = 'orange';
ctx.roundRect(100, 50, 200, 150, [20]);
ctx.stroke();

// CSS 圆角
const roundedBox = document.createElement('div');
roundedBox.style.border = '3px solid teal';
roundedBox.style.borderRadius = '15px';
roundedBox.style.width = '250px';
roundedBox.style.height = '120px';
document.body.appendChild(roundedBox);