# Canvas Design

> |

- **Type:** Skill
- **Install:** `agentstack add skill-hhhh124hhhh-skillmate-canvas-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [hhhh124hhhh](https://agentstack.voostack.com/s/hhhh124hhhh)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [hhhh124hhhh](https://github.com/hhhh124hhhh)
- **Source:** https://github.com/hhhh124hhhh/SkillMate/tree/main/resources/skills/canvas-design

## Install

```sh
agentstack add skill-hhhh124hhhh-skillmate-canvas-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Canvas 设计工具

## 概述

使用 HTML5 Canvas API 创建高质量的设计和艺术作品。

**核心功能**：
- 2D 图形绘制
- 图像处理
- 文字排版
- 导出 PNG/PDF

## 基础设置

### 创建 Canvas

```javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 1920;
canvas.height = 1080;

// 设置背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

## 绘图操作

### 基本形状

```javascript
// 矩形
ctx.fillStyle = '#3498db';
ctx.fillRect(x, y, width, height);

// 圆形
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();

// 线条
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 2;
ctx.stroke();
```

### 文字渲染

```javascript
// 设置字体
ctx.font = 'bold 48px Arial';
ctx.fillStyle = '#333333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 绘制文字
ctx.fillText('Hello Canvas', x, y);

// 文字描边
ctx.strokeText('Outlined Text', x, y);
```

### 渐变

```javascript
// 线性渐变
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, '#3498db');
gradient.addColorStop(1, '#9b59b6');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

// 径向渐变
const radialGradient = ctx.createRadialGradient(x, y, r1, x, y, r2);
radialGradient.addColorStop(0, '#ffffff');
radialGradient.addColorStop(1, '#000000');
ctx.fillStyle = radialGradient;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
```

## 高级效果

### 阴影

```javascript
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(x, y, width, height);
```

### 透明度

```javascript
ctx.globalAlpha = 0.5;
ctx.fillRect(x, y, width, height);
ctx.globalAlpha = 1.0; // 重置
```

### 组合操作

```javascript
// 源图像在目标图像之上
ctx.globalCompositeOperation = 'source-over';

// 目标图像在源图像之上
ctx.globalCompositeOperation = 'destination-over';

// 交集
ctx.globalCompositeOperation = 'source-in';
```

## 图像处理

### 加载图像

```javascript
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, x, y, width, height);
};
img.src = 'image.png';
```

### 图像滤镜

```javascript
// 像素级操作
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

for (let i = 0; i  {
  draw();
});

// 离屏 Canvas
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
// 在离屏 canvas 上绘制
```

### 3. 响应式设计

```javascript
function resizeCanvas() {
  const container = canvas.parentElement;
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;
  redraw();
}
```

## 依赖要求

- 浏览器环境或 Node.js canvas 库
- jsPDF（可选，用于 PDF 导出）

## 代码风格指南

- 使用常量定义颜色和尺寸
- 封装绘制函数
- 添加注释说明复杂逻辑
- 使用模块化代码结构

## 常见陷阱

**避免**：
- ❌ 在循环中重复创建对象
- ❌ 忘记重置状态（globalAlpha, shadow 等）
- ❌ 硬编码坐标（使用相对定位）

**推荐**：
- ✅ 使用 save/restore 保护状态
- ✅ 缓存常用对象
- ✅ 使用变量控制布局参数

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [hhhh124hhhh](https://github.com/hhhh124hhhh)
- **Source:** [hhhh124hhhh/SkillMate](https://github.com/hhhh124hhhh/SkillMate)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-hhhh124hhhh-skillmate-canvas-design
- Seller: https://agentstack.voostack.com/s/hhhh124hhhh
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.