当前位置：首页 > JavaScript

js 实现画布

2026-01-31 18:57:47JavaScript

使用Canvas绘制基本图形

在HTML中创建Canvas元素需要定义宽度和高度，通过JavaScript获取Canvas上下文进行绘制。

<canvas id="myCanvas" width="500" height="500"></canvas>

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

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

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

绘制路径与线条

路径绘制需要调用beginPath()开始，通过moveTo()和lineTo()定义路径。

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

添加文本与样式

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

ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', 250, 400);

图像绘制与操作

通过drawImage()方法可将图像绘制到Canvas上，支持缩放和裁剪。

const img = new Image();
img.src = 'example.png';
img.onload = function() {
  ctx.drawImage(img, 100, 300, 100, 100);
};

动画实现

使用requestAnimationFrame实现动画效果，需在每一帧清除画布并重绘。

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

事件交互处理

通过监听鼠标事件实现交互式绘图。

canvas.addEventListener('mousemove', function(e) {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x - 25, y - 25, 50, 50);
});

保存Canvas内容

Canvas内容可导出为图像数据或文件。

js 实现画布

// 获取图像数据URL
const dataURL = canvas.toDataURL('image/png');

// 触发下载
const link = document.createElement('a');
link.download = 'canvas-image.png';
link.href = dataURL;
link.click();