Canvas方法总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

渲染上下文

getContext() // 获得渲染上下文和它的绘画功能

绘制形状

绘制矩形

fillRect(x, y, width, height) // 绘制一个填充的矩形 strokeRect(x, y, width, height) // 绘制一个矩形的边框 clearRect(x, y, width, height) // 清除指定矩形区域，让清除部分完全透明。

绘制路径

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath() // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 closePath() // 闭合路径之后图形绘制命令又重新指向到上下文中。 stroke() // 通过线条来绘制图形轮廓。 fill() // 通过填充路径的内容区域生成实心的图形。

移动笔触

moveTo(x, y) // 将笔触移动到指定的坐标x以及y上。

线

lineTo(x, y) // 绘制一条从当前位置到指定x以及y位置的直线。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise) // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。 arcTo(x1, y1, x2, y2, radius) // 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y) // 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) // 绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

矩形

rect(x, y, width, height) // 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。 // 当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。

样式和颜色

色彩 Colors

fillStyle = color // 设置图形的填充颜色。 strokeStyle = color // 设置图形轮廓的颜色。

透明度

globalAlpha = transparencyValue // 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。 rgba() // rgba(255, 255, 255, 0.5)

线形

lineWidth = value // 设置线条宽度。 lineCap = type // 设置线条末端样式。 lineJoin = type // 设定线条与线条间接合处的样式。 miterLimit = value // 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。 getLineDash() // 返回一个包含当前虚线样式，长度为非负偶数的数组。 setLineDash(segments) // 设置当前虚线样式。 lineDashOffset = value // 设置虚线样式的起始偏移量。

渐变 Gradients

createLinearGradient(x1, y1, x2, y2) // createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。 createRadialGradient(x1, y1, r1, x2, y2, r2) // createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。 gradient.addColorStop(position, color) // addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

图案样式 Patterns

createPattern(image, type) // 该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

阴影 Shadows

shadowOffsetX = float // shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。 shadowOffsetY = float // shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。 shadowBlur = float // shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。 shadowColor = color // shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

绘制文本

fillText(text, x, y [, maxWidth]) // 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的. strokeText(text, x, y [, maxWidth]) // 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.font = value // 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 textAlign = value // 文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。 textBaseline = value // 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 direction = value // 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。measureText() // 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

使用图像

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数	描述
image	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
sWidth	可选。被剪切图像的宽度
sHeight	可选。被剪切图像的高度。
dx	在画布上放置图像的 x 坐标位置。
dy	在画布上放置图像的 y 坐标位置。
dWidth	可选。要使用的图像的宽度。（伸展或缩小图像）
dHeight	可选。要使用的图像的高度。（伸展或缩小图像）

变形 Transformations

save() // 保存画布(canvas)的所有状态 restore() // save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。translate(x, y) // translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。rotate(angle) // 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。scale(x, y) // scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形，如果比1大会放大图形。默认值为1，为实际大小。transform(m11, m12, m21, m22, dx, dy) // 这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵 resetTransform() // 重置当前变形为单位矩阵