使用 JavaScript Canvas API 绘制二次元少女图 - 详细教程 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>使用 JavaScript Canvas API 绘制二次元少女图 - 详细教程</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <canvas id="girlCanvas" width="400" height="600"></canvas>
  <script>
    const canvas = document.getElementById('girlCanvas');
    const ctx = canvas.getContext('2d');
<pre><code>// 绘制头部
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = '#FFDDC1';
ctx.fill();

// 绘制眼睛
ctx.beginPath();
ctx.arc(160, 180, 20, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();

ctx.beginPath();
ctx.arc(240, 180, 20, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();

// 绘制嘴巴
ctx.beginPath();
ctx.arc(200, 240, 40, 0, Math.PI);
ctx.lineWidth = 4;
ctx.strokeStyle = '#000';
ctx.stroke();

// 绘制头发
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.quadraticCurveTo(200, 100, 300, 200);
ctx.quadraticCurveTo(200, 100, 100, 200);
ctx.fillStyle = '#000';
ctx.fill();

// 绘制身体
ctx.beginPath();
ctx.moveTo(150, 300);
ctx.lineTo(250, 300);
ctx.lineTo(250, 500);
ctx.lineTo(150, 500);
ctx.closePath();
ctx.fillStyle = '#FFDDC1';
ctx.fill();

// 绘制手臂
ctx.beginPath();
ctx.moveTo(150, 300);
ctx.lineTo(100, 400);
ctx.lineTo(100, 500);
ctx.lineTo(150, 500);
ctx.closePath();
ctx.fillStyle = '#FFDDC1';
ctx.fill();

ctx.beginPath();
ctx.moveTo(250, 300);
ctx.lineTo(300, 400);
ctx.lineTo(300, 500);
ctx.lineTo(250, 500);
ctx.closePath();
ctx.fillStyle = '#FFDDC1';
ctx.fill();

// 绘制腿
ctx.beginPath();
ctx.moveTo(150, 500);
ctx.lineTo(100, 600);
ctx.lineTo(150, 600);
ctx.closePath();
ctx.fillStyle = '#FFDDC1';
ctx.fill();

ctx.beginPath();
ctx.moveTo(250, 500);
ctx.lineTo(300, 600);
ctx.lineTo(250, 600);
ctx.closePath();
ctx.fillStyle = '#FFDDC1';
ctx.fill();
</code></pre>
  </script>
</body>
</html>
<p>这段代码使用了 HTML5 的 canvas 元素和 JavaScript 的 canvas API 来绘制二次元少女图。在 canvas 元素上创建一个 2D 上下文，并使用上下文的绘画方法来绘制头部、眼睛、嘴巴、头发、身体、手臂和腿等部分。绘画方法包括绘制圆形、直线、二次贝塞尔曲线以及填充颜色等。</p>