设计工具

Canvas Playground

在 iframe 沙箱中编写 Canvas 2D 绘图代码，实时查看渲染效果与性能帧率。

沙箱隔离运行

运行方式: 沙箱隔离运行
标签: canvas2ddrawingsandbox
工具标识: canvas-playground
Worker: 无需启用
权限: 剪贴板

使用步骤

按页面字段输入、粘贴或导入需要处理的内容。
根据场景调整参数，查看实时预览、统计、提示或生成结果。
复制、导出或记录结果，并在真实环境中复核关键配置。

使用例子

使用Canvas Playground处理一次日常工作流。
把生成结果复制到文档、工单、配置或测试数据中继续使用。

代码

678 字符

const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
const w = canvas.width, h = canvas.height;

// Background
ctx.fillStyle = "#0f172a";
ctx.fillRect(0, 0, w, h);

// Gradient circles
const cx = w / 2, cy = h / 2;
for (let i = 0; i < 12; i++) {
  const angle = (i / 12) * Math.PI * 2;
  const r = 80;
  const x = cx + Math.cos(angle) * r;
  const y = cy + Math.sin(angle) * r;
  ctx.beginPath();
  ctx.arc(x, y, 24, 0, Math.PI * 2);
  ctx.fillStyle = "hsl(" + (i * 30) + ", 80%, 60%)";
  ctx.fill();
}

// Text
ctx.fillStyle = "#ffffff";
ctx.font = "bold 20px system-ui";
ctx.textAlign = "center";
ctx.fillText("Canvas 2D Playground", cx, h - 30);

在沙箱中执行 Canvas 2D 绘图代码；使用 `canvas.getContext("2d")` API。

Canvas Playground

开始使用

使用步骤

使用例子

Canvas Playground

代码

Canvas Playground

Canvas Playground

代码