当前位置：首页 > JavaScript

js实现画画

2026-04-05 16:07:23JavaScript

使用Canvas API实现绘画

HTML5的Canvas API是JavaScript中实现绘画功能的核心工具。通过获取画布上下文，可以绘制各种图形、路径和文本。

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

  // 绘制矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
</script>

实现自由绘画功能

通过监听鼠标事件，可以创建简单的绘图应用。记录鼠标移动轨迹并连接成路径。

let isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
  if (!isDrawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
}

function stopDrawing() {
  isDrawing = false;
}

添加绘画样式选项

扩展绘图功能，允许用户选择颜色、线条粗细等样式。

// 样式控制
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');

colorPicker.addEventListener('change', (e) => {
  ctx.strokeStyle = e.target.value;
});

brushSize.addEventListener('change', (e) => {
  ctx.lineWidth = e.target.value;
});

// 清除画布
document.getElementById('clearBtn').addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

实现高级绘画功能

添加更复杂的绘画功能，如橡皮擦、渐变填充和图像操作。

// 橡皮擦功能
function enableEraser() {
  ctx.globalCompositeOperation = 'destination-out';
}

// 恢复画笔
function enableBrush() {
  ctx.globalCompositeOperation = 'source-over';
}

// 渐变填充
function createGradient(x1, y1, x2, y2, colorStops) {
  const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
  colorStops.forEach(stop => {
    gradient.addColorStop(stop.offset, stop.color);
  });
  return gradient;
}

保存绘画作品

将画布内容导出为图像文件，支持PNG或JPEG格式。

function saveAsPNG() {
  const link = document.createElement('a');
  link.download = 'drawing.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
}

function saveAsJPEG() {
  const link = document.createElement('a');
  link.download = 'drawing.jpg';
  link.href = canvas.toDataURL('image/jpeg', 0.9);
  link.click();
}

使用第三方库增强功能

对于更复杂的绘画需求，可以考虑使用专门的绘图库如Fabric.js或Paper.js。

js实现画画

// 使用Fabric.js示例
const fabricCanvas = new fabric.Canvas('drawingCanvas');
fabricCanvas.add(new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 100,
  top: 100
}));

// 自由绘图模式
fabricCanvas.isDrawingMode = true;
fabricCanvas.freeDrawingBrush.width = 5;
fabricCanvas.freeDrawingBrush.color = 'purple';

这些方法提供了从基础到高级的JavaScript绘画实现方案，可以根据项目需求选择合适的实现方式。

标签: js