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，则第二个参数表示滚动到指定的位置：0.0 表示最左端，1.0 表示最右端

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

-- 跟 xview(MOVETO, fraction) 一样

跟 xview(SCROLL, number, what) 一样

该方法用于在垂直方向上滚动 Canvas 组件的内容，一般通过绑定 Scollbar 组件的 command 选项来实现（具体 *** 作参考：Scrollbar）-- 如果第一个参数是 MOVETO，则第二个参数表示滚动到指定的位置：0.0 表示最顶端，1.0 表示最底端-- 如果第一个参数是 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) 之间滚动

之前用过 echarts 等图表插件，首次尝试自己写原生 canvas ，还以为多难多复杂的东西，深入了解之后发现就是数学中的几何图形嘛~ 欢迎大家和我一起来入坑！

<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。

替换内容

由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 <canvas>，在这些浏览器上你应该总是能展示替代内容。

支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。

用文本替换：

用 <img> 替换：

结束标签 </canvas> 不可省略。

与 <img> 元素不同， <canvas> 元素需要结束标签( </canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。

后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。

<canvas> 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

canvas 提供了三种方法绘制矩形：

说明：这 3 个方法具有相同的参数。

图形的基本元素是路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要一些额外的步骤：

下面是需要用到的方法：

有两个方法可以绘制圆弧：

注意：

arcTo 方法的说明：

这个方法可以这样理解。绘制的弧形是由两条切线所决定。

第 1 条切线：起始点和控制点1决定的直线。

第 2 条切线：控制点1 和控制点2决定的直线。

其实绘制的圆弧就是与这两条直线相切的圆弧。

整理了一些有关canvas的属性（ ’ - ’ * )

canvas画布

用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript

canvas的默认宽高为300*150，不能通过css或行内样式修改它的宽高，它有自己的宽高属性

canvas是一个html元素，通过js来执行绘制

getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持

它可以做什么？

  html5小游戏

  绘制图片，图标，图表，曲线图等等，例如地图上的热力图等等

  以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<http://www.hewebgl.com/>)

画布栅格

  

  通常画布的一个格子就代表canvas中元素的一像素，栅格的左上角为起点，坐标0, 0，所有位置都相对于原点定位，

使用：

  var canvas = document.gteElementById('canvas')

  var context = canvas.getContext('2d')// 环境准备好，调用context的方法属性绘制即可

属性及方法

  beginPath()

    新开始一条路径，绘制方法被指向新路径

  closePath()

    闭合当前路径，让绘制命令重新指向上下文

  stroke()

    通过线条来绘制图像轮廓

  fill()

    通过填充路径的内容区域生成实心图形

  moveTo(x, y)

    描述起点坐标

  lineTo(x, y)

    描述终点坐标

  rect(x, y, width, height)

    绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px

    需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形

  strokeRect(x, y. width, height)

    参数同上，绘制边框矩形

  fillRect(x,y,width,height)

    参数同上，绘制填充矩形

  clearRect(x,y,width,height)

    清除指定区域矩形,会留下一块白色矩形区域

  arc(x,y,r,sangle,eangle,counterclockwise)

    圆弧

    x,y为绘制圆的圆心坐标

    r为圆的半径

    sangle,eangle为圆的起始角度和结束角度

    counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针

  strokeStyle

    描边的颜色

  fillStyle

    填充的颜色

  shadowColor

    阴影颜色

  shadowBlur

    阴影模糊级别

  shadowOffsetX

    阴影水平偏移量

  shadowOffsetY

    阴影垂直偏移量

  lineCap

    设置线条两端结束位置的形状

    butt默认

    round圆形帽

    square正方形

  lineJoin

    设置线条与线条接合处的样式

    miter (默认)， 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

    round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

    bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

  lineWidth

    线条宽度，以像素计算，没有px

  rotate(angle)

    旋转

角度转弧度公式

  deg乘以Math.PI/180

    deg为要绘制的角度

    Math.PI为圆周率，也就是180度，但是它为一个浮点数，即使除以180也不能忽略它的小数

  translate(x, y)

    移动原点

    将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置

  scale(x, y)

    缩放x轴和y轴分别设置缩放

  rotate(x, y)

    旋转

    凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算

  arcTo(x1,y1,x2,y2,r)

    画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径

setLineDash/lineDashOffset/getLineDash

    绘制虚线

    setLineDash([实线长度, 间隙长度])方法接受一个数组，来指定线段与间隙的交替

  lineDashOffset设置起始偏移量

    getLineDash()返回当前虚线的样式，为一个数组

  fillText(text, x, y [, maxWidth])

    绘制填充文本

    text文本

  x,y指定的坐标

    maxWidth最大宽度，可选

strokeText(text, x, y [, maxWidth])

    绘制文本边框

    text文本

    x,y指定坐标

  maxWidth最大宽度，可选

  font

    文本样式

    和css设置字体相似，复合设置

    例如：context.font='100px sans-serif'

  textAlign/textBaseline/direction

    textAlign(文本对齐选项): start|end|left|right|center

    textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom

    direction(文本方向)：ltr|rtl|inherit

  绘制图片

    drawImage(imgElement,x,y,width,height)

    x,y绘制图片的起始坐标

    imgElement 要绘制的图片元素,或者为一个canvas的引用

    width,height,设置图片的宽高

  裁剪图片

    drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)

    imgElement 要绘制的图片元素,或者为一个canvas的引用

    sx, sy (可选)要裁剪的起始位置

    swidth, sheight (可选)要裁剪区域的宽高

    x,y放置原始图片的位置

    width,height (可选)原始图片的宽高

    为了不失真，一般尝试让swidth, sheight和width、height相等，x,y原点，去改变sx,sy(裁剪的起始位置)即可，实际根据需求来定

  save()/restore()

    save() 保存状态，保存在栈中，类似于数组的push

    restore() 恢复状态，类似于数组的pop

  clip()

    裁剪路径

    把一个路径之外的内容进行裁剪，只保留路径本身内部的内容

  用于控制动画的常用方法

    setInterval()

    setTimeout()

    requestAnimationFrame()

      只执行一次，一般通过递归调用来完成动画制作

      接受一个回调函数，专门提供给动画的api，默认刷新帧率为一秒60次，优于以上两个方法，比如页面未激活状态下回自动暂停，节省cpu的开销

      cancelAnimationFrame() 用来停止此方法的执行

    可能有不足的地方 欢迎大家补充(•̀⌄•́)

---