# CanvasRenderingContext2D对象 - [fillRect\(\)](#zh-cn_topic_0000001173164707_section16678142165920) - [fillStyle](#zh-cn_topic_0000001173164707_section159395553313) - [clearRect\(\)](#zh-cn_topic_0000001173164707_section205940367194) - [strokeRect\(\)](#zh-cn_topic_0000001173164707_section18427819195711) - [fillText\(\)](#zh-cn_topic_0000001173164707_section114524106587) - [strokeText\(\)](#zh-cn_topic_0000001173164707_section4144191355810) - [measureText\(\)](#zh-cn_topic_0000001173164707_section378313153588) - [lineWidth](#zh-cn_topic_0000001173164707_section652391716583) - [strokeStyle](#zh-cn_topic_0000001173164707_section1191517562337) - [stroke\(\)](#zh-cn_topic_0000001173164707_section1071523411019) - [beginPath\(\)](#zh-cn_topic_0000001173164707_section12670134392) - [moveTo\(\)](#zh-cn_topic_0000001173164707_section16813157310) - [lineTo\(\)](#zh-cn_topic_0000001173164707_section4767915838) - [closePath\(\)](#zh-cn_topic_0000001173164707_section86825473917) - [lineCap](#zh-cn_topic_0000001173164707_section6852133718410) - [lineJoin](#zh-cn_topic_0000001173164707_section395812401442) - [miterLimit](#zh-cn_topic_0000001173164707_section429711421945) - [font](#zh-cn_topic_0000001173164707_section17597332121110) - [textAlign](#zh-cn_topic_0000001173164707_section15681153321114) - [textBaseline](#zh-cn_topic_0000001173164707_section77981136141111) - [createPattern\(\)](#zh-cn_topic_0000001173164707_section1034582183919) - [bezierCurveTo\(\)](#zh-cn_topic_0000001173164707_section450521614318) - [quadraticCurveTo\(\)](#zh-cn_topic_0000001173164707_section12938183173) - [arc\(\)](#zh-cn_topic_0000001173164707_section102329511716) - [arcTo\(\)](#zh-cn_topic_0000001173164707_section3172156571) - [ellipse\(\)6+](#zh-cn_topic_0000001173164707_section918313239192) - [rect\(\)](#zh-cn_topic_0000001173164707_section1351519304107) - [fill\(\)](#zh-cn_topic_0000001173164707_section14842031151015) - [clip\(\)](#zh-cn_topic_0000001173164707_section1355171921416) - [rotate\(\)](#zh-cn_topic_0000001173164707_section7682182091419) - [scale\(\)](#zh-cn_topic_0000001173164707_section157714218144) - [transform\(\)](#zh-cn_topic_0000001173164707_section1675964717570) - [setTransform\(\)](#zh-cn_topic_0000001173164707_section1439382216440) - [translate\(\)](#zh-cn_topic_0000001173164707_section931011253449) - [createPath2D\(\)6+](#zh-cn_topic_0000001173164707_section6654994314) - [globalAlpha](#zh-cn_topic_0000001173164707_section188252174810) - [drawImage\(\)](#zh-cn_topic_0000001173164707_section1953117410488) - [restore\(\)](#zh-cn_topic_0000001173164707_section64027684817) - [save\(\)](#zh-cn_topic_0000001173164707_section410672635214) - [createLinearGradient\(\)6+](#zh-cn_topic_0000001173164707_section1696310905) - [createRadialGradient\(\)6+](#zh-cn_topic_0000001173164707_section121861417143711) - [createImageData\(\)](#zh-cn_topic_0000001173164707_section2021142714524) - [getImageData\(\)](#zh-cn_topic_0000001173164707_section92731528205217) - [putImageData\(\)](#zh-cn_topic_0000001173164707_section15774154925515) - [setLineDash\(\)](#zh-cn_topic_0000001173164707_section1934985155516) - [getLineDash\(\)](#zh-cn_topic_0000001173164707_section522105285519) - [lineDashOffset](#zh-cn_topic_0000001173164707_section8283548889) - [globalCompositeOperation](#zh-cn_topic_0000001173164707_section123871750284) - [shadowBlur](#zh-cn_topic_0000001173164707_section6207051888) - [shadowColor](#zh-cn_topic_0000001173164707_section42724396120) - [shadowOffsetX](#zh-cn_topic_0000001173164707_section1616174021219) - [shadowOffsetY](#zh-cn_topic_0000001173164707_section272013417128) - [imageSmoothingEnabled6+](#zh-cn_topic_0000001173164707_section770341132716) - [transferFromImageBitmap\(\)7+](#zh-cn_topic_0000001173164707_section9849145418469) 使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 - 示例 ```
``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas1; const ctx = el.getContext('2d'); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }, antialias() { const el = this.$refs.canvas1; const ctx = el.getContext('2d', { antialias: true }); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); } } ``` - 示意图（关闭抗锯齿） ![](figures/zh-cn_image_0000001127125160.png) - 示意图（开启抗锯齿） ![](figures/zh-cn_image_0000001127125162.png) ## fillRect\(\) 填充一个矩形。 - 参数

参数

类型

描述

x

number

指定矩形左上角点的x坐标。

y

number

指定矩形左上角点的y坐标。

width

number

指定矩形的宽度。

height

number

指定矩形的高度。
- 返回值 无 - 示例 ``` ctx.fillRect(20, 20, 200, 150); ``` ![](figures/zh-cn_image_0000001127125134.png) ## fillStyle 指定绘制的填充色。 - 参数

参数

类型

描述

color

<color>

设置填充区域的颜色。

gradient

CanvasGradient

渐变对象，使用 createLinearGradient()方法创建。

pattern

CanvasPattern

使用 createPattern()方法创建。
- 返回值 无 - 示例 ``` ctx.fillStyle = '#0000ff'; ctx.fillRect(20, 20, 150, 100); ``` ![](figures/zh-cn_image_0000001127284942.png) ## clearRect\(\) 删除指定区域内的绘制内容。 - 参数

参数

类型

描述

x

number

指定矩形上的左上角x坐标。

y

number

指定矩形上的左上角y坐标。

width

number

指定矩形的宽度。

height

number

指定矩形的高度。
- 返回值 无 - 示例 ``` ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 400, 200); ctx.clearRect(20, 20, 150, 100); ``` ![](figures/zh-cn_image_0000001173164831.png) ## strokeRect\(\) 绘制具有边框的矩形，矩形内部不填充。 - 参数

参数

类型

描述

x

number

指定矩形的左上角x坐标。

y

number

指定矩形的左上角y坐标。

width

number

指定矩形的宽度。

height

number

指定矩形的高度。
- 返回值 无 - 示例 ``` ctx.strokeRect(30, 30, 200, 150); ``` ![](figures/zh-cn_image_0000001173164817.png) ## fillText\(\) 绘制填充类文本。 - 参数

参数

类型

描述

text

string

需要绘制的文本内容。

x

number

需要绘制的文本的左下角x坐标。

y

number

需要绘制的文本的左下角y坐标。
- 返回值 无 - 示例 ``` ctx.font = '35px sans-serif'; ctx.fillText("Hello World!", 20, 60); ``` ![](figures/zh-cn_image_0000001173164833.png) ## strokeText\(\) 绘制描边类文本。 - 参数

参数

类型

描述

text

string

需要绘制的文本内容。

x

number

需要绘制的文本的左下角x坐标。

y

number

需要绘制的文本的左下角y坐标。
- 返回值 无 - 示例 ``` ctx.font = '25px sans-serif'; ctx.strokeText("Hello World!", 20, 60); ``` ![](figures/zh-cn_image_0000001127125156.png) ## measureText\(\) 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 - 参数

参数

类型

描述

text

string

需要进行测量的文本。
- 返回值

类型

说明

TextMetrics

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。
- 示例 ``` ctx.font = '25px sans-serif'; var txt = 'Hello World'; ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); ctx.fillText(txt, 20, 110); ``` ![](figures/zh-cn_image_0000001127284960.png) ## lineWidth 指定绘制线条的宽度值。 - 参数

参数

类型

描述

lineWidth

number

设置绘制线条的宽度。
- 返回值 无 - 示例 ``` ctx.lineWidth = 5; ctx.strokeRect(25, 25, 85, 105); ``` ![](figures/zh-cn_image_0000001127125166.png) ## strokeStyle 设置描边的颜色。 - 参数

参数

类型

描述

color

<color>

指定描边使用的颜色。

gradient

CanvasGradient

通过createLinearGradient()方法创建。

pattern

CanvasPattern

通过createPattern()方法创建。
- 返回值 无 - 示例 ``` ctx.lineWidth = 10; ctx.strokeStyle = '#0000ff'; ctx.strokeRect(25, 25, 155, 105); ``` ![](figures/zh-cn_image_0000001173324719.png) ## stroke\(\) 进行边框绘制操作。 - 参数 无 - 返回值 无 - 示例 ``` ctx.moveTo(25, 25); ctx.lineTo(25, 105); ctx.strokeStyle = 'rgb(0,0,255)'; ctx.stroke(); ``` ![](figures/zh-cn_image_0000001173164819.png) ## beginPath\(\) 创建一个新的绘制路径。 - 参数 无 - 返回值 无 - 示例 ``` ctx.beginPath(); ctx.lineWidth = '6'; ctx.strokeStyle = '#0000ff'; ctx.moveTo(15, 80); ctx.lineTo(280, 160); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127125164.png) ## moveTo\(\) 路径从当前点移动到指定点。 - 参数

参数

类型

描述

x

number

指定位置的x坐标。

y

number

指定位置的y坐标。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(280, 160); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127125152.png) ## lineTo\(\) 从当前点到指定点进行路径连接。 - 参数

参数

类型

描述

x

number

指定位置的x坐标。

y

number

指定位置的y坐标。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(280, 160); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001173324711.png) ## closePath\(\) 结束当前路径形成一个封闭路径。 - 参数 无 - 返回值 无 - 示例 ``` ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(110, 30); ctx.lineTo(70, 90); ctx.closePath(); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127284950.png) ## lineCap 指定线端点的样式。 - 参数

参数

类型

描述

lineCap

string

线条的端点样式，可选值为：

  • butt（默认）：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
- 返回值 无 - 示例 ``` ctx.lineWidth = 8; ctx.beginPath(); ctx.lineCap = 'round'; ctx.moveTo(30, 50); ctx.lineTo(220, 50); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127125144.png) ## lineJoin 指定线段间相交的交点样式。 - 参数

参数

类型

描述

lineJoin

string

线条的交点样式，可选值为：

  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.lineWidth = 8; ctx.lineJoin = 'miter'; ctx.moveTo(30, 30); ctx.lineTo(120, 60); ctx.lineTo(30, 110); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127125140.png) ## miterLimit 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 - 参数

参数

类型

描述

miterLimit

number

斜接面限制值，该属性默认值为10。
- 返回值 无 - 示例 ``` ctx.lineWidth = 8; ctx.lineJoin = 'miter'; ctx.miterLimit = 3; ctx.moveTo(30, 30); ctx.lineTo(60, 35); ctx.lineTo(30, 37); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127284966.png) ## font 设置文本绘制中的字体样式。 - 参数

参数

类型

描述

value

string

字体样式支持：sans-serif, serif, monospace，该属性默认值为14px sans-serif。

语法：ctx.font="font-style font-weight font-size font-family"5+

默认值："normal normal 14px sans-serif"

  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px，默认值14px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。
- 返回值 无 - 示例 ``` ctx.font = '30px sans-serif'; ctx.fillText("Hello World", 20, 60); ``` ![](figures/zh-cn_image_0000001173324725.png) ## textAlign 设置文本绘制中的文本对齐方式。 - 参数

参数

类型

描述

align

string

可选值为：

  • left（默认）：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐接线结束的地方。
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。
- 返回值 无 - 示例 ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(140, 10); ctx.lineTo(140, 160); ctx.stroke(); ctx.font = '18px sans-serif'; // Show the different textAlign values ctx.textAlign = 'start'; ctx.fillText('textAlign=start', 140, 60); ctx.textAlign = 'end'; ctx.fillText('textAlign=end', 140, 80); ctx.textAlign = 'left'; ctx.fillText('textAlign=left', 140, 100); ctx.textAlign = 'center'; ctx.fillText('textAlign=center',140, 120); ctx.textAlign = 'right'; ctx.fillText('textAlign=right',140, 140); ``` ![](figures/zh-cn_image_0000001173164795.png) ## textBaseline 设置文本绘制中的水平对齐方式。 - 参数

参数

类型

描述

textBaseline

string

可选值为：

  • alphabetic（默认）：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
- 返回值 无 - 示例 ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(0, 120); ctx.lineTo(400, 120); ctx.stroke(); ctx.font = '20px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Top', 10, 120); ctx.textBaseline = 'bottom'; ctx.fillText('Bottom', 55, 120); ctx.textBaseline = 'middle'; ctx.fillText('Middle', 125, 120); ctx.textBaseline = 'alphabetic'; ctx.fillText('Alphabetic', 195, 120); ctx.textBaseline = 'hanging'; ctx.fillText('Hanging', 295, 120); ``` ![](figures/zh-cn_image_0000001173324713.png) ## createPattern\(\) 通过指定图像和重复方式创建图片填充的模板。 - 参数

参数

类型

描述

image

Image

图源对象，具体参考Image对象。

repetition

string

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。
- 返回值

类型

说明

Object

指定图像填充的Pattern对象。
- 示例 ``` var pat = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pat; ctx.fillRect(0, 0, 20, 20); ``` ![](figures/zh-cn_image_0000001173164829.png) ## bezierCurveTo\(\) 创建三次贝赛尔曲线的路径。 - 参数

参数

类型

描述

cp1x

number

第一个贝塞尔参数的x坐标值。

cp1y

number

第一个贝塞尔参数的y坐标值。

cp2x

number

第二个贝塞尔参数的x坐标值。

cp2y

number

第二个贝塞尔参数的y坐标值。

x

number

路径结束时的x坐标值。

y

number

路径结束时的y坐标值。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001152610854.png) ## quadraticCurveTo\(\) 创建二次贝赛尔曲线的路径。 - 参数

参数

类型

描述

cpx

number

贝塞尔参数的x坐标值。

cpy

number

贝塞尔参数的y坐标值。

x

number

路径结束时的x坐标值。

y

number

路径结束时的y坐标值。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.moveTo(20, 20); ctx.quadraticCurveTo(100, 100, 200, 20); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001173324723.png) ## arc\(\) 绘制弧线路径。 - 参数

参数

类型

描述

x

number

弧线圆心的x坐标值。

y

number

弧线圆心的y坐标值。

radius

number

弧线的圆半径。

startAngle

number

弧线的起始弧度。

endAngle

number

弧线的终止弧度。

anticlockwise

boolean

是否逆时针绘制圆弧。
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001127125154.png) ## arcTo\(\) 依据圆弧经过的点和圆弧半径创建圆弧路径。 - 参数

参数

类型

描述

x1

number

圆弧经过的第一个点的x坐标值。

y1

number

圆弧经过的第一个点的y坐标值。

x2

number

圆弧经过的第二个点的x坐标值。

y2

number

圆弧经过的第二个点的y坐标值。

radius

number

圆弧的圆半径值。
- 返回值 无 - 示例 ``` ctx.moveTo(100, 20); ctx.arcTo(150, 20, 150, 70, 50); // Create an arc ctx.stroke(); ``` ![](figures/zh-cn_image_0000001173164807.png) ## ellipse\(\)6+ 在规定的矩形区域绘制一个椭圆。 - 参数

参数

类型

描述

x

number

椭圆圆心的x轴坐标。

y

number

椭圆圆心的y轴坐标。

radiusX

number

椭圆x轴的半径长度。

radiusY

number

椭圆y轴的半径长度。

rotation

number

椭圆的旋转角度，单位为弧度。

startAngle

number

椭圆绘制的起始点角度，以弧度表示。

endAngle

number

椭圆绘制的结束点角度，以弧度表示。

anticlockwise

number

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)
- 返回值 无 - 示例 ``` ctx.beginPath(); ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); ctx.stroke(); ``` ![](figures/ellipse.png) ## rect\(\) 创建矩形路径。 - 参数

参数

类型

描述

x

number

指定矩形的左上角x坐标值。

y

number

指定矩形的左上角y坐标值。

width

number

指定矩形的宽度。

height

number

指定矩形的高度。
- 返回值 无 - 示例 ``` ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) ctx.stroke(); // Draw it ``` ![](figures/zh-cn_image_0000001127125130.png) ## fill\(\) 对封闭路径进行填充。 - 参数 无 - 返回值 无 - 示例 ``` ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) ctx.fill(); // Draw it in default setting ``` ![](figures/zh-cn_image_0000001127284940.png) ## clip\(\) 设置当前路径为剪切路径。 - 参数 无 - 返回值 无 - 示例 ``` ctx.rect(0, 0, 200, 200); ctx.stroke(); ctx.clip(); // Draw red rectangle after clip ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(0, 0, 150, 150); ``` ![](figures/zh-cn_image_0000001127284956.png) ## rotate\(\) 针对当前坐标轴进行顺时针旋转。 - 参数

参数

类型

描述

rotate

number

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。
- 返回值 无 - 示例 ``` ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees ctx.fillRect(70, 20, 50, 50); ``` ![](figures/zh-cn_image_0000001127125146.png) ## scale\(\) 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 - 参数

参数

类型

描述

x

number

设置水平方向的缩放值。

y

number

设置垂直方向的缩放值。
- 返回值 无 - 示例 ``` ctx.strokeRect(10, 10, 25, 25); ctx.scale(2, 2);// Scale to 200% ctx.strokeRect(10, 10, 25, 25); ``` ![](figures/zh-cn_image_0000001173164805.png) ## transform\(\) transform\(\)方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 >![](../../public_sys-resources/icon-note.gif) **说明：** >变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： >- x' = scaleX \* x + skewY \* y + translateX >- y' = skewX \* x + scaleY \* y + translateY - 参数

参数

类型

描述

scaleX

number

指定水平缩放值。

skewX

number

指定水平倾斜值。

skewY

number

指定垂直倾斜值。

scaleY

number

指定垂直缩放值。

translateX

number

指定水平移动值。

translateY

number

指定垂直移动值。
- 返回值 无 - 示例 ``` ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0, 0, 100, 100) ctx.transform(1, 0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 100, 100); ctx.transform(1, 0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 100, 100); ``` ![](figures/zh-cn_image_0000001173164809.png) ## setTransform\(\) setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - 参数

参数

类型

描述

scaleX

number

指定水平缩放值。

skewX

number

指定水平倾斜值。

skewY

number

指定垂直倾斜值。

scaleY

number

指定垂直缩放值。

translateX

number

指定水平移动值。

translateY

number

指定垂直移动值。
- 返回值 无 - 示例 ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 100, 100) ctx.setTransform(1,0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 100, 100); ``` ![](figures/zh-cn_image_0000001173164791.png) ## translate\(\) 移动当前坐标系的原点。 - 参数

参数

类型

描述

x

number

设置水平平移量。

y

number

设置竖直平移量。
- 返回值 无 - 示例 ``` ctx.fillRect(10, 10, 50, 50); ctx.translate(70, 70); ctx.fillRect(10, 10, 50, 50); ``` ![](figures/zh-cn_image_0000001127125158.png) ## createPath2D\(\)6+ 创建一个Path2D对象。 - 参数

参数

类型

描述

path

Path2D

Path2D对象。

cmds

string

SVG的Path描述字符串。
- 返回值 Path2D对象 - 示例 ``` var path1 = ctx.createPath2D(); path1.moveTo(100, 100); path1.lineTo(200, 100); path1.lineTo(100, 200); path1.closePath(); ctx.stroke(path1); var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); ctx.stroke(path2); var path3 = ctx.createPath2D(path2); ctx.stroke(path3); ``` ![](figures/zh-cn_image_0000001152770830.png) ## globalAlpha 设置透明度。 - 参数

参数

类型

描述

value

number

0.0为完全透明，1.0为完全不透明。
- 返回值 无 - 示例 ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 50, 50); ctx.globalAlpha = 0.4; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(50, 50, 50, 50); ``` ![](figures/zh-cn_image_0000001127125168.png) ## drawImage\(\) 进行图像绘制。 - 参数

参数

类型

描述

image

Image

图片资源，请参考Image对象。

sx

number

裁切源图像时距离源图像左上角的x坐标值。

sy

number

裁切源图像时距离源图像左上角的y坐标值。

sWidth

number

裁切源图像时需要裁切的宽度。

sHeight

number

裁切源图像时需要裁切的高度。

dx

number

绘制区域左上角在x轴的位置。

dy

number

绘制区域左上角在y 轴的位置。

dWidth

number

绘制区域的宽度。

dHeight

number

绘制区域的高度。
- 返回值 无 - 示例 ``` var test = this.$element('drawImage'); var ctx = test.getContext('2d'); var img = new Image(); img.src = 'common/image/test.jpg'; ctx.drawImage(img, 50, 80, 80, 80); ``` ![](figures/zh-cn_image_0000001173164821.png) ## restore\(\) 对保存的绘图上下文进行恢复。 - 参数 无 - 返回值 无 - 示例 ``` ctx.restore(); ``` ## save\(\) 对当前的绘图上下文进行保存。 - 参数 无 - 返回值 无 - 示例 ``` ctx.save(); ``` ## createLinearGradient\(\)6+ 创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md#ZH-CN_TOPIC_0000001209210715)。 - 参数

参数

类型

描述

x0

number

起点的x轴坐标。

y0

number

起点的y轴坐标。

x1

number

终点的x轴坐标。

y1

number

终点的y轴坐标。
- 返回值

类型

说明

Object

返回创建的CanvasGradient对象。
- 示例 ``` ``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas; const ctx = el.getContext('2d'); // Linear gradient: start(50,0) end(300,100) var gradient = ctx.createLinearGradient(50,0, 300,100); // Add three color stops gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1.0, 'green'); // Set the fill style and draw a rectangle ctx.fillStyle = gradient; ctx.fillRect(0, 0, 500, 500); } } ``` ![](figures/zh-cn_image_0000001173164827.png) ## createRadialGradient\(\)6+ 创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient - 参数

参数

类型

描述

x0

number

起始圆的x轴坐标。

y0

number

起始圆的y轴坐标。

r0

number

起始圆的半径。必须是非负且有限的。

x1

number

终点圆的x轴坐标。

y1

number

终点圆的y轴坐标。

r1

number

终点圆的半径。必须为非负且有限的。
- 返回值

类型

说明

Object

返回创建的CanvasGradient对象。
- 示例 ``` ``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas; const ctx = el.getContext('2d'); // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); // Add three color stops gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1.0, 'green'); // Set the fill style and draw a rectangle ctx.fillStyle = gradient; ctx.fillRect(0, 0, 500, 500); } } ``` ![](figures/zh-cn_image_0000001173164813.png) ## createImageData\(\) 创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md#ZH-CN_TOPIC_0000001209570711)。 - 参数

参数

类型

描述

width

number

ImageData的宽度。

height

number

ImageData的高度。

imagedata

Object

复制现有的ImageData对象。
- 返回值

类型

说明

Object

返回创建的ImageData对象。
- 示例 ``` imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData ``` ## getImageData\(\) 以当前canvas指定区域内的像素创建ImageData对象。 - 参数

参数

类型

描述

sx

number

需要输出的区域的左上角x坐标。

sy

number

需要输出的区域的左上角y坐标。

sw

number

需要输出的区域的宽度。

sh

number

需要输出的区域的高度。
- 返回值

类型

说明

Object

返回包含指定区域像素的ImageData对象。
- 示例 ``` var test = this.$element('getImageData'); var ctx = test.getContext('2d'); var imageData = ctx.getImageData(0, 0, 280, 300); ``` ## putImageData\(\) 使用ImageData数据填充新的矩形区域。 - 参数

参数

类型

描述

imagedata

Object

包含像素值的ImageData对象。

dx

number

填充区域在x轴方向的偏移量。

dy

number

填充区域在y轴方向的偏移量。

dirtyX

number

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

dirtyY

number

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

dirtyWidth

number

源图像数据矩形裁切范围的宽度。

dirtyHeight

number

源图像数据矩形裁切范围的高度。
- 返回值 无 - 示例 ``` var test = this.$element('putImageData'); var ctx = test.getContext('2d'); var imgData = ctx.createImageData(100, 100); for (var i = 0; i < imgData.data.length; i += 4) { imgData.data[i + 0] = 255; imgData.data[i + 1] = 0; imgData.data[i + 2] = 0; imgData.data[i + 3] = 255; } ctx.putImageData(imgData, 10, 10); ``` ![](figures/zh-cn_image_0000001198530737.png) ## setLineDash\(\) 设置画布的虚线样式。 - 参数

参数

类型

描述

segments

Array

作为数组用来描述线段如何交替和间距长度。
- 返回值 无 - 示例 ``` ctx.arc(100, 75, 50, 0, 6.28); ctx.setLineDash([10,20]); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001152770952.png) ## getLineDash\(\) 获得当前画布的虚线样式。 - 参数 无 - 返回值

类型

说明

Array

返回数组，该数组用来描述线段如何交替和间距长度。。
- 示例 ``` var info = ctx.getLineDash(); ``` ## lineDashOffset 设置画布的虚线偏移量。 - 参数

参数

类型

描述

value

number

精度为float，默认为0.0。
- 返回值 无 - 示例 ``` ctx.arc(100, 75, 50, 0, 6.28); ctx.setLineDash([10,20]); ctx.lineDashOffset = 10.0; ctx.stroke(); ``` ![](figures/zh-cn_image_0000001198530815.png) ## globalCompositeOperation 设置合成操作的方式。 - 参数

参数

类型

描述

type

string

合成操作的类型字段。可选值有source-over(默认值)，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。
属性值：

值

描述

source-over

在现有绘制内容上显示新绘制内容，属于默认值。

source-atop

在现有绘制内容顶部显示新绘制内容。

source-in

在现有绘制内容中显示新绘制内容。

source-out

在现有绘制内容之外显示新绘制内容。

destination-over

在新绘制内容上方显示现有绘制内容。

destination-atop

在新绘制内容顶部显示现有绘制内容。

destination-in

在新绘制内容中显示现有绘制内容。

destination-out

在新绘制内容外显示现有绘制内容。

lighter

显示新绘制内容和现有绘制内容。

copy

显示新绘制内容而忽略现有绘制内容。

xor

使用异或操作对新绘制内容与现有绘制内容进行融合。
- 返回值 无 - 示例 ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 50, 50); ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(50, 50, 50, 50); // Start drawing second example ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(120, 20, 50, 50); ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(150, 50, 50, 50); ``` ![](figures/zh-cn_image_0000001173324717.png) 示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。 ## shadowBlur 设置绘制阴影时的模糊级别，默认值为0.0。 - 参数

参数

类型

描述

blur

number

设置模糊效果的程度值，值越大越模糊，精度为float 。
- 返回值 无 - 示例 ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 100, 80); ``` ![](figures/zh-cn_image_0000001127284952.png) ## shadowColor 设置绘制阴影时的阴影颜色。 - 参数

参数

类型

描述

color

<color>

阴影的颜色值。
- 返回值 无 - 示例 ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,255)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(30, 30, 100, 100); ``` ![](figures/zh-cn_image_0000001127284944.png) ## shadowOffsetX 设置绘制阴影时和原有对象的水平偏移值。 - 参数

参数

类型

描述

offsetX

number

阴影距离原有对象的x轴方向偏移值。
- 返回值 无 - 示例 ``` ctx.shadowBlur = 10; ctx.shadowOffsetX = 20; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 100, 80); ``` ![](figures/zh-cn_image_0000001127125148.png) ## shadowOffsetY 设置绘制阴影时和原有对象的垂直偏移值。 - 参数

参数

类型

描述

offsetY

number

阴影距离原有对象的y轴方向偏移值。
- 返回值 无 - 示例 ``` ctx.shadowBlur = 10; ctx.shadowOffsetY = 20; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(30, 30, 100, 100); ``` ![](figures/zh-cn_image_0000001173164825.png) ## imageSmoothingEnabled6+ 用于设置绘制图片时是否进行图像平滑度调整。 - 参数

参数

类型

描述

enabled

boolean

是否进行图像平滑度调整，默认值为true，即启用。
- 返回值 无 - 示例 ``` var img = new Image(); img.src = 'common/image/huawei.jpg'; img.onload = function() { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0, 400, 200); }; ``` ![](figures/smoothOff.png) ## transferFromImageBitmap\(\)7+ 显示给定的ImageBitmap对象。 - 参数

参数

类型

描述

bitmap

ImageBitmap

待显示的ImageBitmap对象。
- 返回值 无 - 示例 ``` var canvas = this.$refs.canvasId.getContext('2d'); var offscreen = new OffscreenCanvas(500,500); var offscreenCanvasCtx = offscreen.getContext("2d"); offscreenCanvasCtx.fillRect(0, 0, 200, 200); var bitmap = offscreen.transferToImageBitmap(); canvas.transferFromImageBitmap(bitmap); ``` ![](figures/zh-cn_image_0000001198690237.png)