Canvas 相关参数简介

Canvas 组件提供两种方法让你指定或者获取画布对象： Item handles 、 tags 。

调用： Canvas(master=None, cnf={}, kw)

为 Canvas 组件中所有的画布对象添加 tag，该方法相当于 addtag(tag, "all") 。

为显示列表中 item 下方的画布对象添加 Tag，该方法相当于 addtag(tag, "below", item) ； item 可以是单个画布对象的 ID，也可以是某个 tag。

将 tag 添加到与给定（画布坐标系的）坐标 相临近的画布对象（该方法相当于 addtag(tag, "closet", x, y,halo=None, start=None) ）。可选参数 halo 指定一个距离，表示以 为中心，该距离内的所有画布对象均添加 tag；可选参数 start 指定一个画布对象，该方法将为低于但最接近该对象的画布对象添加 tag。 [2]

为所有坐标在矩形 中的画布对象添加 tag，该方法相当于 addtag(tag, "enclosed", x0, y0, x1, y1) 。

跟 addtag_enclosed() 方法相似，不过该方法范围更广（即使画布对象只有一部分在矩形中也算），该方法相当于 addtag(tag, "overlapping", x0, y0, x1, y1) 。

为 item 参数指定的画布对象添加 tag ，该方法相当于 addtag(tag, "withtag", item) 。 item 参数如果指定一个 tag ，则为所有拥有此 tag 的画布对象添加新的 tag；item 参数如果指定一个画布对象，那么只为其添加 tag。

返回一个四元组 用于描述 args 指定的画布对象所在的矩形范围，如果 args 参数省略，则返回所有的画布对象所在的矩形范围。

将窗口坐标系的 X 坐标（screenx）转化为画布坐标系。如果提供 gridspacing 参数，则转换结果将为该参数的整数倍。

将窗口坐标系的 Y 坐标（screeny）转化为画布坐标系。如果提供 gridspacing 参数，则转换结果将为该参数的整数倍。

如果仅提供一个参数（画布对象），返回该画布对象的坐标 。可以通过 coords(item, x1, y1, x2, y2) 来移动画布对象。

删除 item 中从 from 到 to （包含）参数中的字符串。 item 可以是单个画布对象的 ID，也可以是某个 tag。

删除 item 参数指定的画布对象。如果不存在 item 指定的画布对象，并不会产生错误； item 可以是单个画布对象的 ID，也可以是某个 tag。

在 item 参数指定的画布对象中删除指定的 tag。如果 tag 参数被忽略，则删除指定画布对象所有的tags；如果不存在 item 指定的画布对象，并不会产生错误。item 可以是单个画布对象的 ID，也可以是某个 tag。

返回在 item 参数指定的画布对象之上的 ID。如果有多个画布对象符合要求，那么返回最顶端的那个；如果 item 参数指定的是最顶层的画布对象，那么返回一个空元组。item 可以是单个画布对象的 ID，也可以是某个tag。

返回 Canvas 组件上所有的画布对象。返回格式是一个元组，包含所有画布对象的 ID。按照显示列表的顺序返回。该方法相当于 find_withtag('all') 。

返回在 item 参数指定的画布对象之下的 ID。如果有多个画布对象符合要求，那么返回最底端的那个。如果 item 参数指定的是最底层的画布对象，那么返回一个空元组。item 可以是单个画布对象的 ID，也可以是某个 tag。

返回一个元组，包含所有靠近点（x, y）的画布对象的ID。如果没有符合的画布对象，则返回一个空元组。可选参数 halo 用于增加点（x, y）的辐射范围。可选参数 start 指定一个画布对象，该方法仅返回在显示列表中低于但最接近的一个 ID。注意，点（x, y）的坐标是采用画布坐标系来表示。

返回完全包含在限定矩形内所有画布对象的 ID。

返回所有与限定矩形有重叠的画布对象的 ID（也包含在限定矩形内的画布对象）

返回 item 指定的所有画布对象的 ID。item 可以是单个画布对象的 ID，也可以是某个tag

将焦点移动到指定的 item。如果有多个画布对象匹配，则将焦点移动到显示列表中第一个可以接受光标输入的画布对象。item 可以是单个画布对象的 ID，也可以是某个tag

返回与 item 相关联的所有 tags。item 可以是单个画布对象的 ID，也可以是某个 tag

将光标移动到 item 指定的画布对象。这里要求 item 指定的画布对象支持文本输入和转移焦点。 item 可以是单个画布对象的 ID，也可以是某个tag

返回 index 在指定 item 中的位置（沿用 Python 的惯例：0 表示第一）。index 参数可以是：INSERT（当前光标的位置），END（最后一个字符的位置），SEL_FIRST（当前选中文本的起始位置），SEL_LAST（当前选中文本的结束位置），还可以使用格式为 "@x, y" （x 和 y 是画布坐标系）来获得与此坐标最接近的位置。item 可以是单个画布对象的 ID，也可以是某个 tag

在允许进行文本编辑的画布对象的指定位置插入文本。index 参数可以是：INSERT（当前光标的位置），END（最后一个字符的位置），SEL_FIRST（当前选中文本的起始位置），SEL_LAST（当前选中文本的结束位置），还可以使用格式为 "@x, y"（x 和 y 是画布坐标系）来获得与此坐标最接近的位置-- item 可以是单个画布对象的 ID，也可以是某个 tag

获得指定 item 的选项的当前值。item 可以是单个画布对象的 ID，也可以是某个 tag

修改指定 item 的选项的当前值-- item 可以是单个画布对象的 ID，也可以是某个 tag

跟 itemconfig() 一样

将指定画布对象移动到显示列表的顶部。item 可以是单个画布对象的 ID，也可以是某个tag。跟 tag_raise 一样

将指定画布对象移动到显示列表的底部。item 可以是单个画布对象的 ID，也可以是某个 tag。跟 tag_lower 一样

将 item 移动到新位置（x, y）。item 可以是单个画布对象的 ID，也可以是某个 tag。

将 Canvas 的当前内容封装成 PostScript格式（ 什么是 PostScript ）表示

下方表格列举了各个 options 选项的具体含义：

缩放 item 指定的画布对象。xOrigin 和 yOrigin 决定要缩放的位置；xScale 和 yScale 决定缩放的比例；item 可以是单个画布对象的 ID，也可以是某个 tag。

注意：该方法无法缩放 Text 画布对象

可以看一个例子：

调整选中范围，使得给定的 index 参数指定的位置在范围内。item 可以是单个画布对象的 ID，也可以是某个 tag

取消 Canvas 组件中所有选中的范围

调整选中范围的起始位置为 index 参数指定的位置。item 可以是单个画布对象的 ID，也可以是某个 tag

范围在 Canvas 组件中当前文本的选中范围。如果没有则返回 None

调整选中范围的结束位置为 index 参数指定的位置

为 Canvas 组件上的画布对象绑定方法。event 参数是绑定的事件名称，callback 是与之关联的方法。item 可以是单个画布对象的 ID，也可以是某个Tag

注意：与绑定事件关联的是画布对象，而不是 Tag

将一个或多个画布对象移至底部。如果是多个画布对象，将它们都移至底部并保留原有顺序。item 可以是单个画布对象的 ID，也可以是某个Tag

注意：该方法对窗口组件无效，请使用 lower 代替

将一个或多个画布对象移至顶部-- 如果是多个画布对象，将它们都移至顶部并保留原有顺序。item 可以是单个画布对象的 ID，也可以是某个Tag

注意：该方法对窗口组件无效，请使用 lift 代替

解除与 item 绑定的事件。item 可以是单个画布对象的 ID，也可以是某个Tag

将指定画布对象移动到显示列表的顶部。item 可以是单个画布对象的 ID，也可以是某个Tag。跟 tag_raise 一样

返回指定画布对象的类型。返回值可以是："arc", "bitmap","image", "line", "oval", "polygon","rectangle", "text", 或"window"

该方法用于在水平方向上滚动 Canvas 组件的内容，一般通过绑定 Scollbar 组件的 command 选项来实现（具体 *** 作参考：Scrollbar）

-- 如果第一个参数是 MOVETO，则第二个参数表示滚动到指定的位置：00 表示最左端，10 表示最右端

-- 如果第一个参数是 SCROLL，则第二个参数表示滚动的数量，第三个参数表示滚动的单位（可以是 UNITS 或 PAGES），例如：xview(SCROLL,3, UNITS) 表示向右滚动三行

-- 跟 xview(MOVETO, fraction) 一样

跟 xview(SCROLL, number, what) 一样

该方法用于在垂直方向上滚动 Canvas 组件的内容，一般通过绑定 Scollbar 组件的 command 选项来实现（具体 *** 作参考：Scrollbar）-- 如果第一个参数是 MOVETO，则第二个参数表示滚动到指定的位置：00 表示最顶端，10 表示最底端-- 如果第一个参数是 SCROLL，则第二个参数表示滚动的数量，第三个参数表示滚动的单位（可以是 UNITS 或 PAGES），例如：yview(SCROLL,3, PAGES) 表示向下滚动三页

跟 yview(MOVETO, fraction) 一样

跟 yview(SCROLL, number, what) 一样

使用tkinter中创建canvas时，会设置canvas的宽高。一般我们认为canvas中画图区域就是设置的宽高。其实这不太正确，canvas还有一个边框，如果不另外设置，真正的画图区域要减去边框。

比如我们容器的尺寸为width, height。然后在这个容器中添加一个唯一的canvas，canvas的尺寸设置为width, height，并且pack(expand=1, fill=both)。如果给这个canvas设置一个背景色，容器外部设置另外一个背景色，就可以看得到canvas四周有一条白色的边框。这在我们做窗口布置时，显得不太完美。改进方法其实很简单：

见下方 scan_mark(x, y)

使用这种方式来实现 Canvas 内容的滚动。需要将鼠标按钮事件及当前鼠标位置绑定到 scan_mark(x, y) 方法，然后再将 <motion> 事件及当前鼠标位置绑定到 scan_dragto(x,y,gain=10) 方法，就可以实现 Canvas 在当前位置和 sacn_mack(x, y) 指定的位置 (x, y) 之间滚动

当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。

所以当我们给 canvas 设置宽高时需要注意，比例需要时 2:1

canvas html 属性和 css 属性

理论上 canvas 的 width 和 height 都只能是整数，但实际上可以设置小数，浏览器默认会进行取整 *** 作；也可以是带 px 的字符串，但是对于其它单位都会被忽略，渲染为 px；如果设置为负数或者不设置，默认宽是 300，高是 150

为什么<canvas>元素默认尺寸是 300 150，而不是其他尺寸组合呢？这个是 CSS 规范中定义的，作为替换元素，默认的尺寸是 300 150，<canvas>元素就是替换元素，因此默认尺寸是 300 150。由于<svg>元素也是替换元素，因此，<svg>默认的尺寸也是 300 150。

如果没有设置宽高属性，获取是取到的值是默认值

CSS 的 width，height 属性权重要大于<canvas>元素的 width，height 属性权重。

<canvas>的等比例特性是强制的，会忽略 HTML 属性的设置。对比下面的测试 HTML：

最终的宽度表现不是 300 而是等比例缩放的 176px。

1：Canvas 默认的画布宽高是 300 150，当你设置标签的 width，height 属性值时，控制的是 Canvas 的元素本身的宽高，和 Canvas 画布的宽高大小。同时设置定了两个值。

2：而 Css 设置 width，height 时，只仅仅控制了 Canvas 元素自身的宽高，而不会改变 Canvas 画布大小。

而我们最终展示在页面上的内容是 canvas 画布的内容，然后缩放到 css 值大小

比如我们设置了 css

此时 canvas 元素的大小是 600px 300px ；但是画布大小还是 300px 150px

所以还是会先在 300px 150px 上的画布上先绘制，然后在拉伸绘画后的内容到我们 css 大小

此时我们获取 canvas 对象的 width 和 height 依旧还是 300px 150px (而我们绘制图案是也是基于画布大小来说的默认画布的左上角是 0，0)

当我们使用各个 Canvas API 进行图形图像绘制的时候，其坐标位置，尺寸大小等都是相对于<canvas>元素的 HTML 属性 width/height，与 CSS width/height 没有任何关系。

<canvas>元素本质上是个位图，因此，在 retina 高密度屏幕下，如果如果绘制图像，则如果按照视觉尺寸来绘制，可能就会模糊，我们可以将<canvas>元素的尺寸用 HTML 高宽属性设置为 2 倍尺寸，然后使用 CSS 高宽属性设置视觉尺寸为布局需要的尺寸大小。

以上就是关于Canvas 相关参数简介全部的内容，包括:Canvas 相关参数简介、canvas元素html属性的width&height与css样式的width&height关系、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！