Canvas 填满视口；将点击分散在角落、边缘和中心

📢 本文同步发布於公众号：AI Agent · 最佳实践
🔗 原文链接：https://simonwillison.net/2026/Sep/26/kakapo-party/

用 Claude 生成像素风鸮鹦鹉派对动画

我昨天在 WeAreDevelopers 北美世界大会上做了闭幕主题演讲。作为一个“STAR 时刻”，我决定把 2026 年创纪录的鸮鹦鹉繁殖季融入演讲中。

🐦 在结尾幻灯片上，我想做点庆祝性的内容。我注意到最近有不少人在讨论 Claude Opus 5.5 在生成像素艺术动画方面有多强。于是我从 Google 图片搜索中找了三张鸮鹦鹉的照片，丢给 Claude，附上这样的提示：

这里有一些鸮鹦鹉的照片，帮你回忆一下它们长什么样

我需要你用 HTML5 canvas 制作一个动画，像素艺术风格，内容是像素风的鸮鹦鹉蹦蹦跳跳地开派对，有五彩纸屑之类的效果——至少要有 20 只

这是对话记录，这是生成的页面。效果非常棒！

我想把它嵌入 Keynote 演示文件中，于是下载了 HTML，然后告诉本地的 Claude Code 会话：

帮我给 file:///Users/simon/Downloads/kakapo-party.html 录一个视频——你需要在浏览器中加载它，点击几次来触发五彩纸屑效果，视频时长 15 秒

前 3 秒不要开始点击

确保几次点击分布在可点击区域的不同位置

Claude Code 使用了 Playwright（记录在此），生成了这个视频，正是我结尾幻灯片所需要的：

你的浏览器不支持 HTML5 视频。

以下是它使用的完整 Playwright 脚本，简洁得令人愉快：

# /// script
# dependencies = ["playwright"]
# ///
import time
from playwright.sync_api import sync_playwright

W, H = 1280, 720

# Canvas 填满视口；将点击分散在角落、边缘和中心
clicks = [
    (3.0, 640, 360),   # 中心
    (4.2, 160, 120),   # 左上
    (5.4, 1120, 120),  # 右上
    (6.6, 180, 600),   # 左下
    (7.8, 1100, 600),  # 右下
    (9.0, 640, 100),   # 顶部中心
    (10.0, 380, 380),  # 中间偏左
    (11.0, 900, 380),  # 中间偏右
    (12.2, 640, 620),  # 底部中心
    (13.2, 640, 300),  # 最终中心
]

with sync_playwright() as p:
    b = p.chromium.launch()
    ctx = b.new_context(
        viewport={"width": W, "height": H},
        record_video_dir="vids",
        record_video_size={"width": W, "height": H},
    )
    page = ctx.new_page()
    t0 = time.time()
    page.goto("file:///Users/simon/Downloads/kakapo-party.html")
    for t, x, y in clicks:
        time.sleep(max(0, t - (time.time() - t0)))
        page.mouse.click(x, y)
    time.sleep(max(0, 16.0 - (time.time() - t0)))
    ctx.close()
    b.close()

近期文章

这是 Simon Willison 于 2026 年 9 月 26 日发布的一篇文章。