# CanvasRenderingContext2D对象使用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_0000001212161505.png) - 示意图（开启抗锯齿） ![](figures/zh-cn_image_0000001212081543.png) ## fillRect 填充一个矩形。 - 参数

参数	类型	描述
x	number	指定矩形左上角点的x坐标。
y	number	指定矩形左上角点的y坐标。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

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

参数	类型	描述
color	<color>	设置填充区域的颜色。
gradient	CanvasGradient	渐变对象，使用 createLinearGradient()方法创建。
pattern	CanvasPattern	使用 createPattern()方法创建。

- 返回值无 - 示例 ``` ctx.fillStyle = '#0000ff'; ctx.fillRect(20, 20, 150, 100); ``` ![](figures/zh-cn_image_0000001166920120.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_0000001212320079.png) ## strokeRect 绘制具有边框的矩形，矩形内部不填充。 - 参数

参数	类型	描述
x	number	指定矩形的左上角x坐标。
y	number	指定矩形的左上角y坐标。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

- 返回值无 - 示例 ``` ctx.strokeRect(30, 30, 200, 150); ``` ![](figures/zh-cn_image_0000001212440079.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_0000001166441656.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_0000001166601628.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_0000001212161507.png) ## lineWidth 指定绘制线条的宽度值。 - 参数

参数	类型	描述
lineWidth	number	设置绘制线条的宽度。

- 返回值无 - 示例 ``` ctx.lineWidth = 5; ctx.strokeRect(25, 25, 85, 105); ``` ![](figures/zh-cn_image_0000001212081545.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_0000001166760178.png) ## stroke 进行边框绘制操作。 - 参数无 - 返回值无 - 示例 ``` ctx.moveTo(25, 25); ctx.lineTo(25, 105); ctx.strokeStyle = 'rgb(0,0,255)'; ctx.stroke(); ``` ![](figures/zh-cn_image_0000001166920122.png) ## beginPath 创建一个新的绘制路径。 - 参数无 - 返回值无 - 示例 ``` ctx.beginPath(); ctx.lineWidth = '6'; ctx.strokeStyle = '#0000ff'; ctx.moveTo(15, 80); ctx.lineTo(280, 160); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001212320081.png) ## moveTo 路径从当前点移动到指定点。 - 参数

参数	类型	描述
x	number	指定位置的x坐标。
y	number	指定位置的y坐标。

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

参数	类型	描述
x	number	指定位置的x坐标。
y	number	指定位置的y坐标。

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

参数	类型	描述
lineCap	string	线条的端点样式，可选值为： butt（默认）：线端点以方形结束。 round：线端点以圆形结束。 square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。

参数

类型

描述

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_0000001212161509.png) ## lineJoin 指定线段间相交的交点样式。 - 参数

参数	类型	描述
lineJoin	string	线条的交点样式，可选值为： round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 bevel：在线段相连处使用三角形为底填充，每个部分矩形拐角独立。 miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。

参数

类型

描述

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_0000001212081549.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_0000001166760180.png) ## font 设置文本绘制中的字体样式。 - 参数

参数	类型	描述
value	string	字体样式支持：sans-serif, serif, monospace，该属性默认值为14px sans-serif。语法：ctx.font="font-style font-weight font-size font-family"⁵⁺ 默认值："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。

参数

类型

描述

value

string

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

语法：ctx.font="font-style font-weight font-size font-family"⁵⁺

默认值："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_0000001166920126.png) ## textAlign 设置文本绘制中的文本对齐方式。 - 参数

参数	类型	描述
align	string	可选值为： left（默认）：文本左对齐。 right：文本右对齐。 center：文本居中对齐。 start：文本对齐界线开始的地方。 end：文本对齐接线结束的地方。说明： ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

参数

类型

描述

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_0000001212320083.png) ## textBaseline 设置文本绘制中的水平对齐方式。 - 参数

参数	类型	描述
textBaseline	string	可选值为： alphabetic（默认）：文本基线是标准的字母基线。 top：文本基线在文本块的顶部。 hanging：文本基线是悬挂基线。 middle：文本基线在文本块的中间。 ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。 bottom：文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

参数

类型

描述

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_0000001166441662.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_0000001166601632.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_0000001212161513.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_0000001212081551.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_0000001166760184.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_0000001166920132.png) ## ellipse⁶⁺ 在规定的矩形区域绘制一个椭圆。 - 参数

参数	类型	描述
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_0000001212440091.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_0000001166441664.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_0000001166601634.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_0000001212161515.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_0000001212081553.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_0000001166760188.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_0000001166920134.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_0000001212320087.png) ## createPath2D⁶⁺ 创建一个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_0000001212440093.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_0000001166441666.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_0000001166601636.png) ## restore 对保存的绘图上下文进行恢复。 - 参数无 - 返回值无 - 示例 ``` ctx.restore(); ``` ## save 对当前的绘图上下文进行保存。 - 参数无 - 返回值无 - 示例 ``` ctx.save(); ``` ## createLinearGradient⁶⁺ 创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md)。 - 参数

参数	类型	描述
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_0000001212161517.png) ## createRadialGradient⁶⁺ 创建一个径向渐变色，返回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_0000001212081555.png) ## createImageData 创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md)。 - 参数

参数	类型	描述
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_0000001166760190.png) ## setLineDash 设置画布的虚线样式。 - 参数

参数	类型	描述
segments	Array	作为数组用来描述线段如何交替和间距长度。

- 返回值无 - 示例 ``` ctx.arc(100, 75, 50, 0, 6.28); ctx.setLineDash([10,20]); ctx.stroke(); ``` ![](figures/zh-cn_image_0000001166920136.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_0000001212320089.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_0000001212440095.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_0000001166441668.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_0000001166601638.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_0000001212161519.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_0000001212081557.png) ## imageSmoothingEnabled⁶⁺ 用于设置绘制图片时是否进行图像平滑度调整。 - 参数

参数	类型	描述
enabled	boolean	是否进行图像平滑度调整，默认值为true，即启用。

- 返回值无 - 示例 ``` var img = new Image(); img.src = 'common/image/example.jpg'; img.onload = function() { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0, 400, 200); }; ``` ![](figures/smoothOff.png) ## transferFromImageBitmap⁷⁺ 显示给定的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_0000001212320091.png)