使用Brython在CodeHS沙盒运行Python脚本出现多余白色矩形求解决

在CodeHS的Brython沙盒里运行脚本时，我绘制的网格左侧出现了一个多余的白色矩形，查看HTML结构后已定位到来源，但不知道如何去除。我的代码如下：

from browser import document, html, window

# 创建Canvas元素并设置尺寸
canvas = html.CANVAS(width=400, height=400)
document <= canvas

def create_grid(canvas):
    # 获取Canvas绘图上下文
    ctx = canvas.getContext('2d')
    
    # 定义单元格尺寸和线条宽度
    cell_size = 20
    line_width = 1
    
    # 绘制竖向网格线
    for x in range(0, 400, cell_size):
        ctx.moveTo(x, 0)
        ctx.lineTo(x, 400)
        ctx.lineWidth = line_width
        ctx.stroke()
    
    # 绘制横向网格线
    for y in range(0, 400, cell_size):
        ctx.moveTo(0, y)
        ctx.lineTo(400, y)
        ctx.lineWidth = line_width
        ctx.stroke()
                
create_grid(canvas)

解决办法 #

这个白色矩形是CodeHS沙盒自带的UI元素，并非你的代码生成，有几种简单处理方式：

1. 调整Canvas偏移覆盖
   在创建Canvas后添加样式，让它左移覆盖多余矩形，数值可根据实际显示调整：

   canvas.style.marginLeft = "-12px"
   

2. 设置Canvas绝对定位顶到最左
   将Canvas设为绝对定位，直接贴到容器左侧：

   canvas.style.position = "absolute"
   canvas.style.left = "0px"
   

3. 直接隐藏多余元素
   如果能确定白色元素的选择器（如class或id），可直接隐藏它：

   # 替换为你查到的元素选择器，比如".sidebar"或"#extra-box"
   extra_box = document.querySelector("你的元素选择器")
   if extra_box:
       extra_box.style.display = "none"
   

修改后的示例代码 #

from browser import document, html, window

# 创建Canvas并设置尺寸
canvas = html.CANVAS(width=400, height=400)
# 左移Canvas覆盖多余矩形
canvas.style.marginLeft = "-12px"
document <= canvas

def create_grid(canvas):
    ctx = canvas.getContext('2d')
    cell_size = 20
    line_width = 1
    
    # 绘制竖线
    for x in range(0, 400, cell_size):
        ctx.moveTo(x, 0)
        ctx.lineTo(x, 400)
        ctx.lineWidth = line_width
        ctx.stroke()
    
    # 绘制横线
    for y in range(0, 400, cell_size):
        ctx.moveTo(0, y)
        ctx.lineTo(400, y)
        ctx.lineWidth = line_width
        ctx.stroke()
                
create_grid(canvas)

内容的提问来源于stack exchange，提问作者Alex van Winkel