本教程详细介绍了如何在Pyodide环境中集成并使用Basthon修改版Python Turtle库，以在网页上渲染动态SVG图形。文章涵盖了从构建自定义Turtle wheel包、通过Pyodide加载到HTML页面，到最终利用js模块将Turtle绘图输出为SVG动画并显示在指定DOM元素中的完整流程，解决Pyodide原生不支持Turtle模块的问题。
概述
Pyodide为在浏览器中运行Python代码提供了强大的能力，但并非所有Python模块都能够直接在WebAssembly环境中运行，例如标准的turtle模块。为了在网页上实现动态图形绘制，我们可以借助Basthon项目提供的turtle模块修改版。本教程将指导您如何构建这个自定义模块，并将其与Pyodide结合，最终在HTML页面上实时渲染Turtle绘图的SVG动画。
环境准备与自定义Turtle Wheel包构建
首先，我们需要获取Basthon的turtle模块源码并构建一个Python wheel包，以便Pyodide能够加载。
-
获取Basthon Turtle源码： 从Basthon项目（例如其Git仓库）获取turtle模块的相关文件。通常，这包括__init__.py和svg.py等核心文件。将其组织到以下目录结构中：
# 项目根目录 . └── pyodide/ └── turtle/ ├── src/ │ └── turtle/ │ ├── __init__.py │ └── svg.py └── pyproject.toml -
配置pyproject.toml： 在pyodide/turtle/目录下创建pyproject.toml文件，用于定义包的元数据和构建系统。
# pyodide/turtle/pyproject.toml [build-system] requires = ["hatchling"] build-backend = "hatchling.build" [project] name = "turtle" version = "0.0.1"
-
构建Wheel包： 使用以下脚本构建turtle模块的wheel包。请确保您的环境中安装了build和hatchling。
#!/bin/bash # 切换到项目目录 pushd pyodide/turtle # 安装或升级构建工具 python3 -m pip install --upgrade build hatchling # 执行构建 python3 -m build # 返回原目录 popd
执行此脚本后，您将在pyodide/turtle/dist/目录下找到生成的turtle-0.0.1-py2.py3-none-any.whl文件。
Pyodide集成与网页加载
接下来，我们将创建一个HTML页面来加载Pyodide和我们刚刚构建的turtle wheel包，并准备一个区域用于显示Turtle绘图。
-
HTML结构： 创建一个index.html文件，包含Pyodide的加载脚本、一个文本区域用于输入Python代码、一个按钮触发执行，以及一个div元素作为Turtle绘图的容器。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Pyodide Turtle Demo</title> <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script> </head> <body> <h1>Pyodide Turtle SVG动画演示</h1> <textarea id="input" cols="80" rows="15"> import turtle from js import document
t = turtle.Turtle() t.pensize(2) t.speed(0) # 最快速度 t.color("blue")
