当前位置：首页 > JavaScript

js插件实现画笔绘图

2026-04-04 20:45:50JavaScript

使用 Canvas API 实现基础画笔功能

通过 HTML5 的 Canvas API 可以直接实现画笔绘图功能。以下是一个基础实现示例：

<canvas id="drawingCanvas" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('drawingCanvas');
  const ctx = canvas.getContext('2d');
  let isDrawing = false;

  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing);

  function startDrawing(e) {
    isDrawing = true;
    draw(e);
  }

  function draw(e) {
    if (!isDrawing) return;

    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000000';

    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  }

  function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
  }
</script>

使用 Fabric.js 库实现高级绘图

Fabric.js 是一个功能强大的 Canvas 库，简化了绘图操作：

<canvas id="fabricCanvas" width="800" height="600"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<script>
  const canvas = new fabric.Canvas('fabricCanvas');
  let isDrawing = false;

  canvas.on('mouse:down', (o) => {
    isDrawing = true;
    const pointer = canvas.getPointer(o.e);
    canvas.freeDrawingBrush.width = 5;
    canvas.freeDrawingBrush.color = '#000000';
    canvas.isDrawingMode = true;
  });

  canvas.on('mouse:move', () => {
    if (!isDrawing) return;
  });

  canvas.on('mouse:up', () => {
    isDrawing = false;
    canvas.isDrawingMode = false;
  });
</script>

使用 Paper.js 实现矢量绘图

Paper.js 专注于矢量图形绘制：

<canvas id="paperCanvas" resize></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>
<script>
  paper.setup('paperCanvas');
  const path = new paper.Path();
  path.strokeColor = 'black';
  path.strokeWidth = 3;

  const tool = new paper.Tool();
  tool.onMouseDown = (event) => {
    path.add(event.point);
  };

  tool.onMouseDrag = (event) => {
    path.add(event.point);
  };
</script>

实现画笔属性控制

为绘图功能添加可配置的画笔属性：

// 画笔颜色选择
document.getElementById('colorPicker').addEventListener('change', (e) => {
  ctx.strokeStyle = e.target.value;
});

// 画笔粗细控制
document.getElementById('brushSize').addEventListener('input', (e) => {
  ctx.lineWidth = e.target.value;
});

// 橡皮擦功能
document.getElementById('eraserBtn').addEventListener('click', () => {
  ctx.strokeStyle = '#FFFFFF'; // 假设背景为白色
  ctx.globalCompositeOperation = 'destination-out'; // 或使用背景色
});

保存绘图结果

实现绘图结果的保存功能：

document.getElementById('saveBtn').addEventListener('click', () => {
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'drawing.png';
  link.href = dataURL;
  link.click();
});

移动端触摸支持

添加对移动设备触摸事件的支持：

js插件实现画笔绘图

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousedown', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
});

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const mouseEvent = new MouseEvent('mousemove', {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
});

以上方法提供了从基础到高级的画笔绘图实现方案，可以根据项目需求选择合适的实现方式。Canvas API 适合轻量级需求，Fabric.js 和 Paper.js 则提供了更丰富的功能和更简单的 API。