• Lines
  • Line

    Line 线条/直线 beginPath() moveTo() lineTo() stroke()

    # 方法 / 属性 相关描述
    1 beginPath() 起始一条路径,或重置当前路径
    2 moveTo() 把路径移动到画布中的指定点,不创建直线
    3 lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的直线
    4 stroke() 在画布上绘制文本(无填充)

    使用说明:

    在 HTML5 Canvas 上绘制线条/直线,我们需要用到 beginPath() moveTo() lineTo() stroke() 方法。首先使用 beginPath() 方法来声明,起始一条路径。接下来使用 moveTo() 把路径移动到画布中的指定点,然后使用 lineTo() 方法来添加一个新点,然后在画布中创建从该点到最后指定点的直线,最后使用 stroke() 来实现绘制效果,默认颜色是黑色。

  • Line Width

    Line Width 线条/直线宽度 lineWidth

    # 方法 / 属性 相关描述
    1 lineWidth 设置或返回当前的线条/直线宽度

    使用说明:

    使用 lineWidth 来定义 HTML5 Canvas 线条/直线宽度,注:lineWidth 必须定义在 stroke() 之前。

    JavaScript 语法:

    context.lineWidth = number;
  • Line Color

    Line Color 线条/直线颜色 strokeStyle

    # 方法 / 属性 相关描述
    1 strokeStyle 设置或返回用于笔触的颜色、渐变或模式

    使用说明:

    在 HTML5 Canvas 绘制线条/直线颜色时使用 strokeStyle 可设置的颜色值有:字符串(red, green, blue 等),十六进制(#FFF000, #CCC 等)或 rgb / rgba / hsl / hsla 等。

    JavaScript 语法:

    context.strokeStyle = color|gradient|pattern;
    # 参数:值 相关描述
    1 color 指示绘图填充色的 CSS 颜色值。默认值是 #000000 (黑色)。
    2 gradient 用于填充绘图的渐变对象(线性或放射性)。
    3 pattern 用于创建 pattern 笔触的 pattern 对象。
  • Line Cap

    Line Cap 线条/直线线帽 lineCap

    # 方法 / 属性 相关描述
    1 lineCap 设置或返回线条结束端点的线帽样式

    使用说明:

    绘制一个 HTML5 Canvas 线条/直线线帽样式可使用 lineCap 可设置的值有三种风格。注:lineCap 必须定义在 stroke() 之前。

    JavaScript 语法:

    context.lineCap = "butt|round|square";
    # 属性:值 相关描述
    1 butt 默认,向线条的每个末端添加平直的边缘。
    2 round 向线条的每个末端添加圆形线帽。
    3 square 向线条的每个末端添加正方形线帽。
  • Curves
  • Quadratic Curve

    Quadratic Curve 二次贝塞尔曲线 quadraticCurveTo()

    # 方法 / 属性 相关描述
    1 quadraticCurveTo() 创建二次贝塞尔曲线

    使用说明:

    使用 quadraticCurveTo() 方法在 HTML5 Canvas 中创建二次贝塞尔曲线,quadraticCurveTo() 方法拥有一个控制点和一个结束点,共四个参数值。控制点(cpx,cpy)和结束点(x,y),在创建二次贝塞尔曲线时还可以使用 lineWidth strokeStyle lineCap 等属性定义样式。

    JavaScript 语法:

    context.quadraticCurveTo(cpx,cpy,x,y);
    # 参数:值 相关描述
    1 cpx 贝塞尔控制点(Control Point)的 x 坐标。
    2 cpy 贝塞尔控制点(Control Point)的 y 坐标。
    3 x 结束点的 x 坐标。
    4 y 结束点的 y 坐标。
  • Bezier Curve

    Bezier Curve 三次方贝塞尔曲线 bezierCurveTo()

    # 方法 / 属性 相关描述
    1 bezierCurveTo() 创建三次方贝塞尔曲线

    使用说明:

    使用 bezierCurveTo() 方法在 HTML5 Canvas 中创建三次方贝塞尔曲线,bezierCurveTo() 方法拥有两个控制点和一个结束点,共六个参数值。控制点1(cp1x,cp1y),控制点2(cp2x,cp2y)和结束点(x,y),在创建三次方贝塞尔曲线时还可以使用 lineWidth strokeStyle lineCap 等属性定义样式。

    JavaScript 语法:

    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
    # 参数:值 相关描述
    1 cp1x 第一个贝塞尔控制点(Control Point)的 x 坐标。
    2 cp1y 第一个贝塞尔控制点(Control Point)的 y 坐标。
    3 cp2x 第二个贝塞尔控制点(Control Point)的 x 坐标。
    4 cp2y 第二个贝塞尔控制点(Control Point)的 y 坐标。
    5 x 结束点的 x 坐标。
    6 y 结束点的 y 坐标。
  • Paths
  • Line Join

    Line Join 线条拐角 lineJoin

    # 方法 / 属性 相关描述
    1 lineJoin 设置或返回两条线相交时,所创建的拐角类型

    使用说明:

    在 HTML5 Canvas 中创建一条带拐角的线条,可以使用 lineJoin 属性来设置或返回两条线相交时,所创建的拐角类型。lineJoin 属性的可选值有:bevel round miter,注:mitermiterLimit 属性的影响,如果 lineWidth 值太小将难以分辨出线条拐角(不同值)之间的区别。

    JavaScript 语法:

    context.lineJoin = "bevel|round|miter";
    # 参数:值 相关描述
    1 bevel 创建斜角。
    2 round 创建圆角。
    3 miter 默认。创建尖角。
  • Rounded Corners

    Rounded Corners 圆角 arcTo()

    # 方法 / 属性 相关描述
    1 arcTo() 创建两条线之间的弧/曲线。

    使用说明:

    在 HTML5 Canvas 中创建圆角,可以使用 arcTo() 方法来创建两条线之间的弧/曲线。。

    JavaScript 语法:

    context.fillRect(x1,y1,x2,y2,r);
    # 参数:值 相关描述
    1 x1 弧的起点 x 坐标。
    2 y1 弧的起点 y 坐标。
    3 x2 弧的终点 x 坐标。
    4 y2 弧的终点 y 坐标。
    5 r 弧的半径(radius)。
  • Path

    Path 绘制路径(汇总) lineTo() arcTo() quadraticCurveTo() bezierCurveTo()

    使用说明:

    在 HTML5 Canvas 中创建一条路径,可以使用 lineTo() arcTo() quadraticCurveTo() bezierCurveTo() 方法来绘制一条复杂曲折的线条路径。

  • Shapes
  • Custom Shape

    Custom Shape 自定义形状 closePath()

    使用说明:

    在 HTML5 Canvas 中绘制自定义形状,可以使用 closePath() 方法创建从当前点回到起始点的路径,关闭绘制路径。

    # 方法 / 属性 相关描述
    1 closePath() 创建从当前点回到起始点的路径,关闭绘制路径。
  • Rectangle

    Rectangle 矩形 rect()

    使用说明:

    在 HTML5 Canvas 中绘制矩形,可以使用 rect() 方法创建矩形,其参数值有四个。

    # 方法 / 属性 相关描述
    1 rect() 创建矩形

    JavaScript 语法:

    context.rect(x,y,width,height);
    # 参数:值 相关描述
    1 x 矩形左上角的 x 坐标。
    2 y 矩形左上角的 y 坐标。
    3 width 矩形的宽度,以像素计。
    4 height 矩形的高度,以像素计。
  • Arc

    Arc 弧/曲线 arc()

    # 方法 / 属性 相关描述
    1 arc() 创建弧/曲线(用于创建圆形或部分圆)

    使用说明:

    在 HTML5 Canvas 中绘制圆形或部分圆需要使用 arc() 方法,创建圆形时是由一个中心点,一个半径,一个开始角,一个结束角和绘制方向(顺时针或逆时针)组成的。在绘制弧形时还可以使用 lineWidth strokeStyle lineCap 等属性定义样式。

    JavaScript 语法:

    context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    # 参数:值 相关描述
    1 x 圆的中心的 x 坐标。
    2 y 圆的中心的 y 坐标。
    3 r 圆的半径(Radius)。
    4 sAngle 起始角(Starting Angle),以弧度计(弧的圆形的三点钟位置是 0 度)。
    5 eAngle 结束角(Ending Angle),以弧度计。
    6 counterclockwise 可选,规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
  • Fill Styles
  • Color Fill

    Color Fill 填充颜色 fillStyle

    使用说明:

    fillStyle 在 HTML5 Canvas 中设置或返回用于填充绘画的颜色、渐变或模式。可设置的颜色值有:字符串(red, green, blue 等),十六进制(#FFF000, #CCC 等)或 rgb / rgba / hsl / hsla 等。

    # 方法 / 属性 相关描述
    1 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。

    JavaScript 语法:

    context.fillStyle = color|gradient|pattern;
  • Linear Gradient

    Linear Gradient 线性渐变 createLinearGradient()

    使用说明:

    在 HTML5 Canvas 中创建线性渐变 可使用 createLinearGradient() 方法,线性渐变方法可用于填充矩形、圆形、线条、文本等等。在创建线性渐变时需要使用 addColorStop() 插入颜色属性和停止位置。

    # 方法 / 属性 相关描述
    1 createLinearGradient() 创建线性渐变。

    JavaScript 语法:

    context.createLinearGradient(x0,y0,x1,y1);
    # 参数:值 相关描述
    1 x0 渐变开始点的 x 坐标。
    2 y0 渐变开始点的 y 坐标。
    3 x1 渐变结束点的 x 坐标。
    4 y1 渐变结束点的 y 坐标。
  • Radial Gradient

    Radial Gradient 放射渐变 createRadialGradient()

    使用说明:

    在 HTML5 Canvas 中创建放射渐变 可使用 createRadialGradient() 方法,放射渐变方法可用于填充矩形、圆形、线条、文本等等。在创建放射渐变时需要使用 addColorStop() 插入颜色属性和停止位置。

    # 方法 / 属性 相关描述
    1 createRadialGradient() 创建线性渐变。

    JavaScript 语法:

    context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    # 参数:值 相关描述
    1 x0 渐变的开始圆的 x 坐标。
    2 y0 渐变的开始圆的 y 坐标。
    3 r0 开始圆的半径。
    4 x1 渐变的结束圆的 x 坐标。
    5 y1 渐变的结束圆的 y 坐标。
    6 r1 结束圆的半径。
  • Pattern

    Pattern 模式元素 createPattern()

    使用说明:

    在 HTML5 Canvas 中创建模式元素(可以是图片、视频,或者其他 Canvas 元素)可使用 createPattern() 方法,被重复的元素可用于绘制/填充矩形、圆形或线条等等。

    # 方法 / 属性 相关描述
    1 createPattern() 创建模式元素(可以是图片、视频,或者其他 Canvas 元素)。

    JavaScript 语法:

    context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
    # 参数:值 相关描述
    1 image 规定要使用的图片、画布或视频元素。
    2 repeat 默认。该模式在水平和垂直方向重复。
    3 repeat-x 该模式只在水平方向重复。
    4 repeat-y 该模式只在垂直方向重复。
    5 no-repeat 该模式只显示一次(不重复)。
  • Images
  • Draw Image

    Draw Image 绘制图像 drawImage()

    使用说明:

    在 HTML5 Canvas 中绘制图像、画布或视频可使用 drawImage() 方法,该方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。

    # 方法 / 属性 相关描述
    1 drawImage() 绘制图像、画布或视频或绘制图像的某些部分,以及/或者增加或减少图像的尺寸。

    JavaScript 语法:

    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    # 参数:值 相关描述
    1 img 规定要使用的图像、画布或视频。
    2 sx 开始剪切的 x 坐标位置(sourceX)。
    3 sy 开始剪切的 y 坐标位置(sourceY)。
    4 swidth 被剪切图像的宽度(sourceWidth)。
    5 sheight 被剪切图像的高度(sourceHeight)。
    6 x 在画布上放置图像的 x 坐标位置。
    7 y 在画布上放置图像的 y 坐标位置。
    8 width 要使用的图像的宽度。(伸展或缩小图像)
    9 height 要使用的图像的高度。(伸展或缩小图像)
  • Text
  • Font & Size & Style

    Font & Size & Style 字体样式 font fillText()

    使用说明:

    在 HTML5 Canvas 中可以使用 font 属性设置文字的字体、大小和风格等,或返回 Canvas 上文本内容的当前字体属性,使用 fillText() 绘制文本

    JavaScript 语法:

    context.fillText(text,x,y,maxWidth);
    # 参数:值 相关描述
    1 text 规定在画布上输出的文本。
    2 x 开始绘制文本的 x 坐标位置(相对于画布)。
    3 y 开始绘制文本的 y 坐标位置(相对于画布)。
    3 maxWidth 可选。允许的最大文本宽度,以像素计。
  • Text Stroke

    Text Stroke 文字 strokeStyle

    # 方法 / 属性 相关描述
    1 strokeStyle 设置或返回用于笔触的颜色、渐变或模式

    使用说明:

    在 HTML5 Canvas 中设置或返回文字颜色时可使用 strokeStyle 该属性可设置的颜色值有:字符串(red, green, blue 等),十六进制(#FFF000, #CCC 等)或 rgb / rgba / hsl / hsla 等。

    JavaScript 语法:

    context.strokeStyle = color|gradient|pattern;
    # 参数:值 相关描述
    1 color 指示绘图填充色的 CSS 颜色值。默认值是 #000000 (黑色)。
    2 gradient 用于填充绘图的渐变对象(线性或放射性)。
    3 pattern 用于创建 pattern 笔触的 pattern 对象。
  • Text Align

    Text Align 文本对齐方式 textAlign

    # 方法 / 属性 相关描述
    1 textAlign 设置或返回文本内容的当前对齐方式

    使用说明:

    在 HTML5 Canvas 中需要设置或返回文本内容的当前对齐方式时可使用 textAlign

    JavaScript 语法:

    context.textAlign = "center|end|left|right|start";
    # 参数:值 相关描述
    1 start 默认值。文本在指定的位置开始。
    2 end 文本在指定的位置结束。
    3 center 文本的中心被放置在指定的位置。
    4 left 文本左对齐。
    5 right 文本右对齐。
  • Text Baseline

    Text Baseline 文本基线 textBaseline

    # 方法 / 属性 相关描述
    1 textBaseline 设置或返回在绘制文本时使用的当前文本基线

    使用说明:

    在 HTML5 Canvas 中使用 textAlign 设置或返回在绘制文本时使用的当前文本基线。

    JavaScript 语法:

    context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";
    # 参数:值 相关描述
    1 alphabetic 默认值。文本基线是普通的字母基线。
    2 top 文本基线是 em 方框的顶端。
    3 hanging 文本基线是悬挂基线。
    4 middle 文本基线是 em 方框的正中。
    5 ideographic 文本基线是表意基线。
    5 bottom 文本基线是 em 方框的底端。
  • Text Metrics

    Text Metrics 文本测量(文本宽度对象) measureText()

    # 方法 / 属性 相关描述
    1 measureText() 返回包含指定文本宽度的对象

    使用说明:

    在 HTML5 Canvas 测量一段字符串的宽度可使用 measureText() 文本对象来获得该对象包含以像素计的指定文本宽度。

    JavaScript 语法:

    context.measureText(text).width;
    # 参数:值 相关描述
    1 text 要测量的文本。
  • Transformations
  • Translate

    Translate 改变/转变 translate()

    # 方法 / 属性 相关描述
    1 translate() 重新映射 Canvas 上的 (0,0) 位置

    使用说明:

    在 HTML5 Canvas 可使用 translate() 重新映射 Canvas 上的 (0,0) 位置。

    JavaScript 语法:

    context.translate(x,y);
    # 参数:值 相关描述
    1 x 添加到水平坐标(x)上的值。
    2 y 添加到垂直坐标(y)上的值。
  • Scale

    Scale 缩放 scale()

    # 方法 / 属性 相关描述
    1 scale() 缩放当前绘图的大小,更大或更小。

    使用说明:

    在 HTML5 Canvas 改变绘图大小可使用 scale() 进行缩放。

    JavaScript 语法:

    context.scale(scalewidth,scaleheight);
    # 参数:值 相关描述
    1 scalewidth 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
    2 scaleheight 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
  • Rotate

    Rotate 旋转 rotate()

    # 方法 / 属性 相关描述
    1 rotate() 旋转当前绘图。

    使用说明:

    在 HTML5 Canvas 旋转绘图可使用 rotate() 进行旋转。

    JavaScript 语法:

    context.rotate(angle);
    # 参数:值 相关描述
    1 angle 旋转角度,以弧度计。
    如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。
    举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。
  • Custom Transform

    Custom Transform 自定义改变 transform()

    # 方法 / 属性 相关描述
    1 transform() 自定义缩放、旋转、移动和倾斜。

    使用说明:

    在 HTML5 Canvas 可使用 transform() 对绘图进行自定义缩放、旋转、移动和倾斜。

    JavaScript 语法:

    context.transform(a,b,c,d,e,f);
    # 参数:值 相关描述
    1 a 水平缩放绘图。
    2 b 水平倾斜绘图。
    3 c 垂直倾斜绘图。
    4 d 垂直缩放绘图。
    5 e 水平移动绘图。
    6 f 垂直移动绘图。
  • Composites
  • Shadows

    Shadows 阴影 shadowColor shadowBlur shadowOffsetX shadowOffsetY

    # 方法 / 属性 相关描述
    1 shadowColor 设置或返回用于阴影的颜色。
    2 shadowBlur 设置或返回用于阴影的模糊级别。
    3 shadowOffsetX 设置或返回阴影距形状的水平距离。
    4 shadowOffsetY 设置或返回阴影距形状的垂直距离。

    使用说明:

    在 HTML5 Canvas 中给绘图添加阴影可使用 shadowColor 设置阴影的颜色,shadowBlur 设置模糊度, shadowOffsetX 设置阴影距形状的水平距离, shadowOffsetY 设置阴影距形状的垂直距离。

    JavaScript 语法:

    context.shadowColor = color;
    # 参数:值 相关描述
    1 color 用于阴影的 CSS 颜色值。默认值是 #000000(黑色)。
    context.shadowBlur = number;
    # 参数:值 相关描述
    1 number 阴影的模糊级数。
    context.shadowOffsetX = number;
    # 参数:值 相关描述
    1 number 正值或负值,定义阴影与形状的水平距离。
    context.shadowOffsetY = number;
    # 参数:值 相关描述
    1 number 正值或负值,定义阴影与形状的垂直距离。
  • Global Alpha

    Global Alpha 透明/Alpha globalAlpha

    # 方法 / 属性 相关描述
    1 globalAlpha 设置或返回绘图的当前 alpha 或透明值。

    使用说明:

    在 HTML5 Canvas 中设置或返回绘图的当前 alpha 或透明值,使用 globalAlpha

    JavaScript 语法:

    context.globalAlpha = number;
    # 参数:值 相关描述
    1 number 透明值。必须介于 0(完全透明) 与 1(不透明) 之间。
  • Clipping Region

    Clipping Region 剪切区域 clip()

    # 方法 / 属性 相关描述
    1 clip() 从原始 Canvas 剪切任意形状和尺寸的区域。

    使用说明:

    在 HTML5 Canvas 中使用 clip() 从原始 Canvas 剪切任意形状和尺寸的区域

  • Operations

    Operations 合成操作 globalCompositeOperation

    # 方法 / 属性 相关描述
    1 globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。

    使用说明:

    在 HTML5 Canvas 中使用 globalCompositeOperation 设置或返回新图像如何绘制到已有图像上的合成绘图效果。

    JavaScript 语法:

    context.globalCompositeOperation = "source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|darker|xor|copy";
    # 参数:值 相关描述
    1 source-over 默认。在目标图像上显示源图像。
    2 source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
    3 source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
    4 source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
    5 destination-over 在源图像上方显示目标图像。
    6 destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
    7 destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
    8 destination-out 透明值。必须介于 0(完全透明) 与 1(不透明) 之间。
    9 lighter 显示源图像 + 目标图像。
    10 darker 在图形重叠的地方,颜色由两个颜色值相减后决定
    11 xor 使用异或操作对源图像与目标图像进行组合。
    12 copy 显示源图像。忽略目标图像。
  • Image Data & URLs
  • Image Data

    Image Data 图像数据/对象 getImageData()

    # 方法 / 属性 相关描述
    1 getImageData() 返回 ImageData 对象,该对象为 Canvas 上指定的矩形复制像素数据。

    使用说明:

    在 HTML5 Canvas 中使用 getImageData() 返回指定图像的 ImageData 对象,该对象为 Canvas 上指定的矩形复制像素数据。

    JavaScript 语法:

    var imgData = context.getImageData(x,y,width,height);
    # 参数:值 相关描述
    1 x 开始复制的左上角位置的 x 坐标。
    2 y 开始复制的左上角位置的 y 坐标。
    3 width 将要复制的矩形区域的宽度。
    4 height 将要复制的矩形区域的高度。
  • Invert Colors

    Invert Colors 图像反色 putImageData()

    # 方法 / 属性 相关描述
    1 putImageData() 把图像数据(从指定的 ImageData 对象)放回 Canvas 上。

    使用说明:

    在 HTML5 Canvas 中使用 putImageData() 把图像数据(从指定的 ImageData 对象)放回 Canvas 上,并反转 Canvas 上的图像的每个像素的颜色。

    JavaScript 语法:

    context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
    # 参数:值 相关描述
    1 imgData 规定要放回画布的 ImageData 对象。
    2 x ImageData 对象左上角的 x 坐标,以像素计。
    3 y ImageData 对象左上角的 y 坐标,以像素计。
    4 dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。
    5 dirtyY 可选。水平值(y),以像素计,在画布上放置图像的位置。
    6 dirtyWidth 可选。在画布上绘制图像所使用的宽度。
    7 dirtyHeight 可选。在画布上绘制图像所使用的高度。
  • Get Data URL

    Get Data URL 获取图像数据/对象 URL toDataURL()

    # 方法 / 属性 相关描述
    1 toDataURL() 获得 base64 编码 PNG 图像 URL,可引用在 img 中。

    使用说明:

    在 HTML5 Canvas 中使用 toDataURL() 获得 base64 编码 PNG 图像 URL,可引用在 img 中,可以通过 toDataURL("image/jpeg",0.5) 参数得到不同格式与质量的图像

    JavaScript 语法:

    context.toDataURL(format,number);
    # 参数:值 相关描述
    1 format 可选,image/jpeg 得到 jpeg 格式的图像
    2 number 可选,0-1 之间的数值改变图像像素质量。
  • Animation
  • Clear Canvas

    Clear Canvas 清除 Canvas clearRect()

    # 方法 / 属性 相关描述
    1 clearRect() 清除 Canvas 中指定的图形像素

    使用说明:

    在 HTML5 Canvas 中使用 clearRect() 清除 Canvas 中指定的图形像素。

    JavaScript 语法:

    context.clearRect(x,y,width,height);
    # 参数:值 相关描述
    1 x 要清除的矩形左上角的 x 坐标。
    2 y 要清除的矩形左上角的 y 坐标。
    3 width 要清除的矩形的宽度,以像素计。
    4 height 要清除的矩形的高度,以像素计。
  • Animation Frames

    Animation Frames 动画框架 requestAnimFrame

    # 方法 / 属性 相关描述
    1 requestAnimFrame 可使动画效果更加流畅

    使用说明:

    在 HTML5 Canvas 中使用 requestAnimFrame 让浏览器优化动画 FPS,使动画达到最优质的效果。

  • Mouse Detection
  • Mouse Coordinates

    Mouse Coordinates 鼠标坐标 getMousePos()

    # 方法 / 属性 相关描述
    1 getMousePos() 获取鼠标移动坐标。

    使用说明:

    在 HTML5 Canvas 中使用 getMousePos() 获取鼠标移动坐标。