当前位置：首页 > JavaScript

js 画图实现

2026-04-07 03:39:22JavaScript

在JavaScript中实现画图功能可以通过多种方式实现，以下是常见的几种方法及其具体实现步骤：

使用Canvas API

Canvas是HTML5提供的原生绘图API，适合动态图形和复杂绘图需求。
创建Canvas元素并获取绘图上下文：

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

绘制基本图形示例：
绘制矩形：

js 画图实现

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100); // x, y, width, height

绘制路径（如三角形）：

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

使用SVG（可缩放矢量图形）

SVG通过DOM操作实现，适合需要交互或缩放的高质量图形。
创建SVG元素并添加图形：

js 画图实现

<svg id="mySvg" width="500" height="500"></svg>
<script>
  const svg = document.getElementById('mySvg');
  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', 'blue');
  svg.appendChild(rect);
</script>

使用第三方库（如D3.js或Chart.js）

对于数据可视化或高级图表，推荐使用成熟库。
Chart.js绘制折线图示例：

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
        label: 'Sales',
        data: [12, 19, 3],
        borderColor: 'rgb(75, 192, 192)'
      }]
    }
  });
</script>

使用WebGL（Three.js）

需要3D绘图时，可通过Three.js简化WebGL操作：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
</script>