登录注册

当前位置：首页 > 文章列表 > 文章 > python教程 > Pyodide用BasthonTurtle画动态SVG

Pyodide用BasthonTurtle画动态SVG

2025-12-07 13:09:37 0浏览 收藏

学习文章要努力，但是不要急！今天的这篇文章《Pyodide用Basthon Turtle画动态SVG图形》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

在Pyodide中利用Basthon Turtle模块渲染网页动态SVG图形

本文详细介绍了如何在Pyodide环境中集成并使用Basthon修改版的Python Turtle模块，以实现在网页上动态渲染SVG图形。教程涵盖了自定义Turtle模块的打包、Pyodide的加载与包管理，以及通过JavaScript DOM操作将Turtle生成的SVG内容嵌入网页的关键步骤，最终实现浏览器内的可视化绘图。

在Web浏览器环境中直接运行Python的turtle模块面临挑战，因为它通常依赖于桌面GUI库（如Tkinter），而这些库在WebAssembly（WASM）环境中不可用。Pyodide使得在浏览器中运行Python成为可能，但标准的turtle模块仍需特殊处理。Basthon项目提供了一个兼容浏览器的turtle模块实现，它能够生成SVG格式的图形。本教程将指导您如何在Pyodide中使用Basthon的turtle模块，并在网页上展示动态的SVG绘图。

1. 构建Basthon Turtle自定义包

首先，我们需要获取Basthon的turtle模块源代码并将其打包成Pyodide可加载的wheel文件。

1.1 准备文件结构

创建一个项目目录，并将Basthon turtle模块的__init__.py和svg.py文件放置在指定位置。

pyodide/
  turtle/
    src/
      turtle/
        __init__.py  # 从Basthon获取
        svg.py       # 从Basthon获取
    pyproject.toml

您可以在Basthon的Git仓库中找到这些文件： __init__.py: https://framagit.org/basthon/basthon-kernel/-/blob/master/packages/kernel-python3/src/modules/turtle/turtle/__init__.pysvg.py: https://framagit.org/basthon/basthon-kernel/-/blob/master/packages/kernel-python3/src/modules/turtle/turtle/svg.py

1.2 配置 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"

1.3 构建Wheel文件

使用以下脚本来构建自定义的turtle模块wheel文件。确保您的环境中安装了python3和pip。

#!/bin/bash

# build.sh
pushd pyodide/turtle
python3 -m pip install --upgrade build
python3 -m build
popd

运行此脚本后，您将在pyodide/turtle/dist/目录下找到一个.whl文件，例如turtle-0.0.1-py2.py3-none-any.whl。这个文件就是我们将要在Pyodide中加载的自定义turtle模块。

2. Pyodide环境配置与模块加载

接下来，我们需要创建一个HTML页面来加载Pyodide，并引入我们刚刚构建的turtle模块。

2.1 HTML骨架

创建一个index.html文件，包含Pyodide的加载逻辑和一个用于显示SVG的div元素。



  
    
    Pyodide Turtle SVG
    
    
  
  
    
Pyodide Basthon Turtle SVG 渲染

    
在下方输入Python Turtle代码，点击“运行”即可在页面上查看SVG绘图。

    

    

    

    
正在加载 Pyodide...

2.2 运行环境说明

由于浏览器安全策略（CORS），直接通过file://协议打开index.html将无法加载.whl文件。您需要通过一个本地HTTP服务器来运行此HTML文件。最简单的方法是在包含index.html和pyodide目录的父目录中运行Python的简单HTTP服务器：

python -m http.server

然后，在浏览器中访问http://localhost:8000。

3. 实现SVG动态渲染

现在我们已经成功加载了Pyodide和自定义的turtle模块，关键在于如何将turtle生成的图形呈现在网页上。Basthon turtle模块的设计使得它能够生成SVG字符串，并通过Pyodide的js模块与JavaScript DOM进行交互。

3.1 核心Python代码

在HTML页面的