Menu
Canvas 设计工具 - 使用 HTML Canvas API 创建视觉设计和艺术作品。 生成 PNG/PDF 格式的设计作品。当用户需要：创建设计、生成艺术、视觉创作时触发此技能。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
帮我生成封面图和视觉内容
帮我找热门创作话题
内容插图规划工具。当用户说"给文章配图"、"为文章生成插图"、"文章配图"、 "分析文章并配图"、"自动插图"、"为文章生成配图"时触发此技能。 工作流程： 1. 读取文章内容（read_file） 2. 分析需要插图的位置 3. 选择合适的风格（14种风格可选） 4. 调用 image-generation 技能生成图片 5. 更新文章，插入图片引用 支持风格：tech、fresh、minimal、warm、business、elegant、bold、 playful、nature、sketch、notion（默认）
帮我分析内容数据
帮我润色文章、换个风格、扩充内容
让文字更像人写的
| name | canvas-design |
| description | Canvas 设计工具 - 使用 HTML Canvas API 创建视觉设计和艺术作品。 生成 PNG/PDF 格式的设计作品。当用户需要：创建设计、生成艺术、视觉创作时触发此技能。 |
使用 HTML5 Canvas API 创建高质量的设计和艺术作品。
核心功能：
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);
// 矩形
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();
// 设置字体
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);
// 线性渐变
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();
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(x, y, width, height);
ctx.globalAlpha = 0.5;
ctx.fillRect(x, y, width, height);
ctx.globalAlpha = 1.0; // 重置
// 源图像在目标图像之上
ctx.globalCompositeOperation = 'source-over';
// 目标图像在源图像之上
ctx.globalCompositeOperation = 'destination-over';
// 交集
ctx.globalCompositeOperation = 'source-in';
const img = new Image();
img.onload = () => {
ctx.drawImage(img, x, y, width, height);
};
img.src = 'image.png';
// 像素级操作
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
// 灰度效果
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // R
data[i + 1] = avg; // G
data[i + 2] = avg; // B
}
ctx.putImageData(imageData, 0, 0);
// 导出为 PNG
const dataURL = canvas.toDataURL('image/png');
// 下载
const link = document.createElement('a');
link.download = 'design.png';
link.href = dataURL;
link.click();
import jsPDF from 'jspdf';
const pdf = new jsPDF({
orientation: 'landscape',
unit: 'px',
format: [canvas.width, canvas.height]
});
const imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('design.pdf');
function drawGeometricPattern() {
const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12'];
for (let i = 0; i < 50; i++) {
ctx.beginPath();
ctx.arc(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random() * 50 + 10,
0,
Math.PI * 2
);
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.globalAlpha = 0.7;
ctx.fill();
}
}
function drawGrid(cols, rows) {
const cellWidth = canvas.width / cols;
const cellHeight = canvas.height / rows;
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const x = i * cellWidth;
const y = j * cellHeight;
ctx.strokeStyle = '#dddddd';
ctx.strokeRect(x, y, cellWidth, cellHeight);
}
}
}
ctx.save(); // 保存状态
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // 恢复状态
// 批量绘制
requestAnimationFrame(() => {
draw();
});
// 离屏 Canvas
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
// 在离屏 canvas 上绘制
function resizeCanvas() {
const container = canvas.parentElement;
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
redraw();
}
避免：
推荐：