当前位置：首页 > JavaScript

js实现画框

2026-03-15 08:54:25JavaScript

使用Canvas绘制矩形框

在HTML中创建Canvas元素，通过JavaScript获取上下文并绘制矩形：

<canvas id="myCanvas" width="400" height="300"></canvas>

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

// 设置边框样式
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;

// 绘制矩形框
ctx.strokeRect(50, 50, 300, 200);

使用CSS border属性创建视觉框

通过纯CSS方式快速创建带边框的元素：

<div class="box-frame"></div>

.box-frame {
  width: 300px;
  height: 200px;
  border: 2px dashed #3498db;
  border-radius: 8px;
  padding: 20px;
  background-color: #f8f9fa;
}

SVG实现矢量框

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

<svg width="400" height="300">
  <rect x="50" y="50" 
        width="300" height="200"
        stroke="#2ecc71"
        stroke-width="4"
        fill="none"
        rx="10" />
</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;

  const width = e.offsetX - startX;
  const height = e.offsetY - startY;

  ctx.strokeRect(startX, startY, width, height);
});

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

带阴影效果的高级画框

实现带有阴影和渐变效果的框：

js实现画框

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

ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;

const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, '#ff7e5f');
gradient.addColorStop(1, '#feb47b');

ctx.strokeStyle = gradient;
ctx.lineWidth = 8;
ctx.lineJoin = 'round';

ctx.strokeRect(50, 50, 300, 200);