本教程旨在指导如何在Pyodide环境中集成并使用Basthon的修改版Turtle模块，以在网页上渲染Python Turtle图形为动态SVG。文章详细介绍了模块的打包、Pyodide的加载配置，以及通过JavaScript DOM操作将Turtle生成的SVG内容注入到HTML页面的关键步骤，帮助开发者在浏览器中实现Python图形化编程。
1. Basthon Turtle模块的集成与打包
Pyodide默认不包含Python的turtle模块，但我们可以利用Basthon提供的修改版turtle模块来解决这一限制。首先，需要将Basthon的turtle源码集成到项目中并打包成Pyodide可加载的wheel文件。
1.1 项目结构准备
创建一个如下所示的目录结构，并将Basthon turtle模块的__init__.py和svg.py文件放置到相应位置：
pyodide/
turtle/
src/
turtle/
__init__.py
svg.py
pyproject.toml1.2 pyproject.toml 配置
在pyodide/turtle/目录下创建pyproject.toml文件，用于定义项目的构建信息：
[build-system] requires = ["hatchling"] build-backend = "hatchling.build" [project] name = "turtle" version = "0.0.1"
1.3 打包Wheel文件
使用以下脚本来构建turtle模块的wheel文件。确保你已经安装了build模块 (pip install build)。
#!/bin/bash pushd pyodide/turtle python3 -m pip install --upgrade build python3 -m build popd
执行此脚本后，会在pyodide/turtle/dist/目录下生成一个名为turtle-0.0.1-py2.py3-none-any.whl的wheel文件。
2. Pyodide环境配置与HTML集成
接下来，我们需要创建一个HTML页面来加载Pyodide和我们刚刚打包的turtle wheel文件，并提供一个执行Python代码的界面。
2.1 HTML页面结构
创建一个index.html文件，包含Pyodide的加载逻辑、一个文本区域用于输入Python代码、一个按钮触发执行，以及一个用于显示SVG图形的div元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pyodide Turtle SVG</title>
<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
<style>
body { font-family: sans-serif; margin: 20px; }
textarea { width: 100%; max-width: 800px; margin-bottom: 10px; }
#visual { border: 1px solid #ccc; min-height: 300px; width: 100%; max-width: 800px; margin-top: 10px; overflow: hidden; }
#output { white-space: pre-wrap; background-color: #f0f0f0; padding: 10px; margin-top: 10px; max-width: 800px; }
</style>
</head>
<body>
<h1>Pyodide Turtle SVG 渲染</h1>
<textarea id="input" cols="80" rows="15">
import turtle
t = turtle.Turtle()
t.speed(0) # 最快速度
t.pensize(2)
colors = ["red", "purple", "blue", "green", "orange", "yellow"]
for i in range(36):
t.pencolor(colors[i % 6])
t.forward(100)
t.left(100)
# 关键步骤：显示场景并获取SVG
from js import document
turtle.Screen().show_scene()
document.getElementById("visual").innerHTML = turtle.svg()
</textarea>
<br/>
<button id="run" onclick="run()" disabled>运行Python代码</button>
<p>Pyodide加载中...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1495" title="Img.Upscaler"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680403854636.jpg" alt="Img.Upscaler" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1495" title="Img.Upscaler">Img.Upscaler</a>
<p>免费的AI图片放大工具</p>
</div>
<a href="/ai/1495" title="Img.Upscaler" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div id="output"></div>
<div id="visual"></div>
<script type="text/javascript">
const runButton = document.getElementById("run");
const input = document.getElementById("input");
const output = document.getElementById("output");
let pyodide;
const main = async () => {
output.innerHTML = "加载 Pyodide...";
pyodide = await loadPyodide({
stdout: (text) => output.innerHTML += text + "\n",
stderr: (text) => output.innerHTML += `<span style="color: red;">${text}</span>\n`,
});
output.innerHTML += "Pyodide 加载完成。\n";
runButton.disabled = false;
};
main();
const run = async () => {
output.innerHTML = "";
try {
// 加载自定义的turtle wheel文件
await pyodide.loadPackage("./pyodide/turtle/dist/turtle-0.0.1-py2.py3-none-any.whl");
// 加载Python代码中可能存在的其他依赖
await pyodide.loadPackagesFromImports(input.value);
// 执行Python代码
await pyodide.runPython(input.value);
} catch (error) {
console.error("Python执行错误:", error);
output.innerHTML += `<span style="color: red;">错误: ${error}</span>\n`;
}
};
</script>
</body>
</html>2.2 运行Web服务器
由于浏览器安全策略（CORS限制），直接打开HTML文件无法加载本地的.whl文件。你需要通过一个本地Web服务器来提供服务。最简单的方法是在包含index.html和pyodide/目录的父目录下运行Python的内置HTTP服务器：
python -m http.server
然后，在浏览器中访问http://localhost:8000/index.html。
3. 渲染SVG图形到页面
这是将Python Turtle绘图结果显示在网页上的核心步骤。Basthon turtle模块能够生成SVG字符串，我们需要将其注入到HTML的DOM中。
3.1 问题分析
直接调用turtle.svg()在Pyodide中可能会遇到TypeError: 'pyodide.ffi.JsProxy' object is not callable的错误。这通常是因为Pyodide在处理Python与JavaScript对象之间的类型转换时，未能正确识别turtle.svg为一个可调用的函数。
3.2 解决方案
正确的做法是利用Pyodide提供的js模块来与浏览器DOM进行交互，并在获取SVG内容后将其赋值给HTML元素的innerHTML属性。
以下是需要添加到Python代码中的关键行：
from js import document # 导入js模块，用于访问浏览器DOM
# ... 你的turtle绘图代码 ...
turtle.Screen().show_scene() # 确保turtle屏幕已经准备好并渲染了场景
# 获取turtle生成的SVG字符串，并将其设置为指定HTML元素的innerHTML
document.getElementById("visual").innerHTML = turtle.svg()代码解释：
- from js import document: 这行代码允许Python代码访问浏览器的全局document对象，从而能够进行DOM操作。
- turtle.Screen().show_scene(): 这是Basthon turtle模块特有的一个方法，它指示turtle屏幕完成当前的绘图并准备好生成SVG。对于生成完整的、可能包含动画的SVG至关重要。
- document.getElementById("visual").innerHTML = turtle.svg():
- document.getElementById("visual")：通过其ID获取HTML页面中用于显示SVG的div元素。
- turtle.svg()：调用Basthon turtle模块的svg()方法，它会返回一个包含Turtle绘图结果的完整SVG字符串。如果Turtle绘图包含了动画指令，这个SVG字符串通常会包含相应的SMIL动画定义，从而在浏览器中呈现动态效果。
- .innerHTML = ...：将获取到的SVG字符串赋值给div元素的innerHTML属性，浏览器会自动解析并渲染这段SVG代码。
将上述关键代码添加到你的Python绘图脚本末尾，当你在HTML页面中执行这段Python代码时，Turtle绘制的图形（包括动画）就会以SVG的形式呈现在id="visual"的div中。
4. 注意事项与总结
- 实时动画与最终渲染：Basthon turtle模块能够生成包含SMIL动画的SVG。通过turtle.svg()获取到的SVG字符串，当被注入到DOM中时，如果其中包含动画定义，浏览器将直接播放这些动画。这意味着你看到的是一个完整的、可能包含动画过程的SVG，而不是每一帧的实时更新。
- Web服务器：始终通过Web服务器（如python -m http.server）运行你的HTML文件，以避免CORS问题导致Pyodide无法加载本地的wheel文件。
- 错误处理：在JavaScript的run函数中，添加了try...catch块来捕获Python执行过程中可能出现的错误，并将其显示在页面上，这对于调试非常有用。
- Basthon turtle的特性：Basthon的turtle模块是为在浏览器环境中运行而优化的，它与标准Python turtle模块的行为可能略有不同，尤其是在图形输出方面。
- Pyodide性能：对于复杂的Turtle绘图，Pyodide的执行速度可能会受到浏览器JavaScript引擎性能的限制。
通过本教程，你现在应该能够成功地在Pyodide环境中利用Basthon turtle模块进行图形编程，并将动态的SVG输出呈现在网页上，为Web应用增添更多交互性和视觉元素。
