CSS Canvas 绘图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>像素画生成器</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 32px auto; }
    canvas { border: 2px solid #ccc; image-rendering: pixelated; touch-action: none; }
    .bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
    input[type="color"] { width: 48px; height: 32px; }
    button { padding: 6px 14px; border: none; border-radius: 6px;
             background: #39C5BB; color: #fff; cursor: pointer; }
  </style>
</head>
<body>
  <h3>16x16 像素画</h3>
  <div class="bar">
    <input type="color" id="color" value="#39C5BB" />
    <button id="clear">清空</button>
    <button id="export">导出 PNG</button>
  </div>
  <canvas id="board" width="320" height="320"></canvas>

  <script>
    const N = 16;                          // 16x16 格
    const CELL = 20;                       // 每格 20 CSS 像素
    const canvas = document.getElementById('board');
    const ctx = canvas.getContext('2d');   // 画笔，所有绘制都通过它

    // 高清屏处理：物理像素 = CSS 像素 x devicePixelRatio，否则画布会发虚
    const dpr = window.devicePixelRatio || 1;
    canvas.width = N * CELL * dpr;
    canvas.height = N * CELL * dpr;
    canvas.style.width = N * CELL + 'px';
    canvas.style.height = N * CELL + 'px';
    ctx.scale(dpr, dpr);

    const grid = Array.from({ length: N }, () => Array(N).fill(null));

    function render() {
      ctx.clearRect(0, 0, N * CELL, N * CELL);
      // 网格线
      ctx.strokeStyle = '#eee';
      for (let i = 0; i <= N; i++) {
        ctx.beginPath();
        ctx.moveTo(i * CELL, 0); ctx.lineTo(i * CELL, N * CELL);
        ctx.moveTo(0, i * CELL); ctx.lineTo(N * CELL, i * CELL);
        ctx.stroke();
      }
      // 已上色的格子
      for (let y = 0; y < N; y++) {
        for (let x = 0; x < N; x++) {
          if (grid[y][x]) {
            ctx.fillStyle = grid[y][x];
            ctx.fillRect(x * CELL, y * CELL, CELL, CELL);
          }
        }
      }
    }

    // 按住拖动连续上色：pointerdown/pointermove 一套通吃鼠标与触摸
    let painting = false;
    function paintAt(e) {
      const rect = canvas.getBoundingClientRect();
      const x = Math.floor((e.clientX - rect.left) / CELL);
      const y = Math.floor((e.clientY - rect.top) / CELL);
      if (x < 0 || y < 0 || x >= N || y >= N) return;
      grid[y][x] = document.getElementById('color').value;
      render();
    }
    canvas.addEventListener('pointerdown', (e) => {
      painting = true;
      canvas.setPointerCapture(e.pointerId);
      paintAt(e);
    });
    canvas.addEventListener('pointermove', (e) => { if (painting) paintAt(e); });
    canvas.addEventListener('pointerup', () => { painting = false; });

    document.getElementById('clear').addEventListener('click', () => {
      grid.forEach((row) => row.fill(null));
      render();
    });
    document.getElementById('export').addEventListener('click', () => {
      canvas.toBlob((blob) => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'pixel-art.png';
        a.click();
        URL.revokeObjectURL(a.href);
      });
    });

    render();
  </script>
</body>
</html>

ctx.fillStyle = '#39C5BB';
ctx.fillRect(10, 10, 100, 50);     // 实心矩形
ctx.strokeRect(120, 10, 100, 50);  // 描边矩形（颜色看 strokeStyle）
ctx.clearRect(0, 0, w, h);         // 擦除（透明），动画每帧的第一步

ctx.beginPath();               // 忘了这句，新形状会和旧路径连成一体
ctx.arc(100, 100, 40, 0, Math.PI * 2);  // 圆：圆心、半径、起止角
ctx.fillStyle = '#ffd9e3';
ctx.fill();

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();

ctx.save();
ctx.translate(200, 100);        // 原点挪到 (200,100)
ctx.rotate(Math.PI / 4);        // 之后画的都旋转 45 度
ctx.fillRect(-25, -25, 50, 50); // 以新原点为中心画方块
ctx.restore();                  // 坐标系原样恢复

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 1. 清
  update();                                          // 2. 更新状态
  draw();                                            // 3. 重画
  requestAnimationFrame(animate);                    // 4. 下一帧（约 60fps）
}
requestAnimationFrame(animate);

const img = new Image();
img.onload = () => {
  // drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
  ctx.drawImage(img, 100, 100, 200, 100,  0, 0, 400, 200);  // 裁剪原图一块并放大绘制
};
img.src = 'photo.jpg';

const g = ctx.createLinearGradient(0, 0, 400, 0);  // 或 createRadialGradient
g.addColorStop(0, '#39C5BB');
g.addColorStop(1, '#ffd9e3');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 400, 300);

ctx.globalCompositeOperation = 'destination-out';
// 之后再画的部分会变成"橡皮擦"，把下层像素抠掉

<canvas id="chart" role="img" aria-label="近 12 个月投稿量柱状图">
  你的浏览器不支持画布，图表数据见下方表格。
  <table>……同数据的表格版本……</table>
</canvas>