当前位置：首页 > JavaScript

js实现canvas

2026-03-14 19:34:21JavaScript

使用Canvas绘制基本图形

在HTML中创建Canvas元素并设置宽度和高度，通过JavaScript获取Canvas上下文进行绘制。

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

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

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

绘制路径和线条

使用路径API可以绘制复杂的线条和形状，通过moveTo和lineTo定义路径。

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.stroke();

添加文本和样式

Canvas支持文本渲染，可以设置字体、颜色和对齐方式。

ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', canvas.width / 2, 50);

图像绘制和操作

Canvas可以加载并绘制图像，支持缩放和裁剪。

const img = new Image();
img.src = 'image.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 200);
};

动画实现

使用requestAnimationFrame实现平滑动画，通过清除和重绘Canvas实现动态效果。

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 100, 50, 50);
  x += 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(animate);
}
animate();

事件交互处理

监听鼠标或触摸事件，实现Canvas的交互功能。

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  ctx.fillRect(x - 25, y - 25, 50, 50);
});

高级效果和滤镜

通过像素操作实现灰度、反色等滤镜效果。

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = avg;
  data[i + 1] = avg;
  data[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);

性能优化技巧

避免频繁的Canvas状态改变，使用离屏Canvas预渲染复杂图形。

js实现canvas

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCtx.fillRect(0, 0, 100, 100);
ctx.drawImage(offscreenCanvas, 0, 0);