当前位置：首页 > JavaScript

js画图实现

2026-01-14 14:31:22JavaScript

使用Canvas API绘制图形

Canvas是HTML5提供的绘图API，通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例：

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

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

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

使用SVG创建矢量图形

SVG是XML格式的矢量图形标准，可以直接嵌入HTML中：

js画图实现

<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" fill="red"/>
  <circle cx="100" cy="100" r="30" fill="blue"/>
</svg>

使用第三方库绘制图表

Chart.js是流行的图表库，适合数据可视化：

js画图实现

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)'
        ]
      }]
    }
  });
</script>

使用D3.js创建复杂可视化

D3.js适合创建复杂的数据驱动图形：

<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="chart"></div>
<script>
  const data = [4, 8, 15, 16, 23, 42];

  d3.select("#chart")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("height", d => `${d * 3}px`)
    .text(d => d);
</script>

使用Three.js创建3D图形

Three.js是WebGL封装库，适合3D图形渲染：

<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>