当前位置：首页 > JavaScript

js实现画画

2026-01-31 23:49:39JavaScript

使用 Canvas API 绘制图形

HTML5 的 <canvas> 元素结合 JavaScript 的 Canvas API 可以实现丰富的绘图功能。以下是一个基础示例：

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

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

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

实现自由绘制功能

通过监听鼠标事件可以实现自由绘画板：

const canvas = document.getElementById('drawCanvas');
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 = '#000';

  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();
}

使用 SVG 实现矢量绘图

SVG 是另一种在网页上绘制图形的方案：

js实现画画

<svg id="svgCanvas" width="500" height="500" style="border:1px solid #000"></svg>
<script>
  const svg = document.getElementById('svgCanvas');

  // 添加矩形
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('x', 50);
  rect.setAttribute('y', 50);
  rect.setAttribute('width', 100);
  rect.setAttribute('height', 100);
  rect.setAttribute('fill', 'green');
  svg.appendChild(rect);
</script>

使用第三方绘图库

对于更复杂的绘图需求，可以考虑使用专业绘图库：

Paper.js - 矢量图形库
Fabric.js - 交互式绘图库
Konva.js - 2D绘图库
Three.js - 3D绘图库

以 Paper.js 为例：

js实现画画

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

  paper.view.onMouseMove = (event) => {
    path.add(event.point);
  };
</script>

保存绘图结果

可以将画布内容导出为图像：

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

响应式绘图

确保画布在不同设备上显示正常：

function resizeCanvas() {
  canvas.width = window.innerWidth * 0.8;
  canvas.height = window.innerHeight * 0.8;
}

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

以上方法提供了从基础到进阶的 JavaScript 绘图实现方案，可根据具体需求选择合适的技术方案。

标签: js