当前位置：首页 > JavaScript

js画图实现

2026-02-28 19:49:43JavaScript

使用Canvas API绘制图形

Canvas是HTML5提供的绘图API，通过JavaScript操作Canvas元素实现绘图功能。创建Canvas元素并获取绘图上下文后，可使用各种方法绘制图形。

// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

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

// 绘制圆形
ctx.beginPath();
ctx.arc(150, 35, 25, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

使用SVG进行矢量图形绘制

SVG是基于XML的矢量图形格式，可直接嵌入HTML文档中。JavaScript可以动态创建和修改SVG元素。

js画图实现

// 创建SVG元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');

// 添加圆形
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('fill', 'green');
svg.appendChild(circle);

// 添加到DOM
document.body.appendChild(svg);

使用第三方绘图库

D3.js是功能强大的数据可视化库，适合创建复杂的交互式图表和图形。

// 使用D3.js绘制柱状图
const data = [4, 8, 15, 16, 23, 42];

d3.select('body')
  .selectAll('div')
  .data(data)
  .enter()
  .append('div')
  .style('height', d => `${d * 5}px`)
  .style('background-color', 'steelblue')
  .style('margin', '2px');

Chart.js是简单易用的图表库，适合快速创建各种统计图表。

js画图实现

// 使用Chart.js创建折线图
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80],
      borderColor: 'rgb(75, 192, 192)'
    }]
  }
});

使用WebGL进行3D绘图

Three.js是基于WebGL的3D图形库，适合创建复杂的3D场景和动画。

// 使用Three.js创建3D场景
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();

使用CSS绘制图形

纯CSS也可以实现各种图形绘制，适合简单的形状和动画效果。

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff0000, #0000ff);
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
<div class="circle"></div>