HTMLCanvasElement //canvas elem对象
属性
属性
height//高
width//宽
方法
方法getContext()//获取相关的可绘制的上下文
toBlob()//(ie 不支持)此方法可以将画布转换为base64格式的图片数据，我们可以通过设定参数指定转换的图片类型，甚至图片的清晰度
toDataURL()//可以将画布转换为Blob对象CanvasRenderingContext2D//等于 canvas.getContext('2d')对象;
绘制矩形
绘制矩形

canvas.clearRect()//清除指定矩形区域内部所有的像素信息为初始色（通常为透明）。

canvas.fillRect()//矩形填充，可以填充颜色，渐变，图案等。

canvas.strokeRect()//矩形描边。
canvas.clearRect()//清除指定矩形区域内部所有的像素信息为初始色（通常为透明）。canvas.fillRect()//矩形填充，可以填充颜色，渐变，图案等。canvas.strokeRect()//矩形描边。绘制文本
绘制文本

canvas.fillText()//文字填充，可以填充纯色，渐变或者图案。

canvas.strokeText()//文字描边。

canvas.measureText()//文字测量。返回TextMetrics对象，该对象的width属性值就是字符占据的宽度。
canvas.fillText()//文字填充，可以填充纯色，渐变或者图案。canvas.strokeText()//文字描边。canvas.measureText()//文字测量。返回TextMetrics对象，该对象的width属性值就是字符占据的宽度。文本样式
文本样式

canvas.font//设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。

canvas.textAlign//设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。

canvas.textBaseline//设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。

canvas.direction//设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。
canvas.font//设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。canvas.textAlign//设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。canvas.textBaseline//设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。canvas.direction//设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。填充和描边
填充和描边


canvas.fillStyle//填充样式。默认值是#000000纯黑色。

canvas.fill()//填充。

canvas.strokeStyle//描边样式。默认值是#000000纯黑色。

canvas.stroke()//描边。
canvas.fillStyle//填充样式。默认值是#000000纯黑色。canvas.fill()//填充。canvas.strokeStyle//描边样式。默认值是#000000纯黑色。canvas.stroke()//描边。渐变相关
渐变相关


canvas.createLinearGradient()//创建线性渐变。

canvas.createRadialGradient()//创建径向渐变。
canvas.createLinearGradient()//创建线性渐变。canvas.createRadialGradient()//创建径向渐变。图案相关
图案相关
canvas.createPattern()//创建图案。图案内容可以是图片，可以是元素，也可以是渐变。此方法返回CanvasPattern对象。阴影相关
阴影相关

canvas.shadowBlur//阴影模糊大小。默认值是0。

canvas.shadowColor//阴影颜色。默认值是全透明黑色。

canvas.shadowOffsetX//阴影水平偏移大小。默认值是0。

canvas.shadowOffsetY//阴影垂直偏移大小。默认值是0。
canvas.shadowBlur//阴影模糊大小。默认值是0。canvas.shadowColor//阴影颜色。默认值是全透明黑色。canvas.shadowOffsetX//阴影水平偏移大小。默认值是0。canvas.shadowOffsetY//阴影垂直偏移大小。默认值是0。绘制路径
绘制路径

canvas.beginPath()//开始一个新路径。

canvas.closePath()//闭合一个路径。

canvas.moveTo()//路径绘制起始点。

canvas.lineTo()//绘制直线到指定坐标点。

canvas.bezierCurveTo()//绘制贝赛尔曲线到指定坐标点。

canvas.quadraticCurveTo()//绘制二次贝赛尔曲线到指定坐标点。

canvas.arc()//绘制圆弧（包括圆）。

canvas.arcTo()//绘制圆弧，和之前的点以直线相连。

canvas.rect()//绘制矩形路径。

canvas.ellipse()//绘制椭圆路径。

canvas.clip()//创建剪裁路径，之后绘制的路径只有在里面的才会显示。
canvas.beginPath()//开始一个新路径。canvas.closePath()//闭合一个路径。canvas.moveTo()//路径绘制起始点。canvas.lineTo()//绘制直线到指定坐标点。canvas.bezierCurveTo()//绘制贝赛尔曲线到指定坐标点。canvas.quadraticCurveTo()//绘制二次贝赛尔曲线到指定坐标点。canvas.arc()//绘制圆弧（包括圆）。canvas.arcTo()//绘制圆弧，和之前的点以直线相连。canvas.rect()//绘制矩形路径。canvas.ellipse()//绘制椭圆路径。canvas.clip()//创建剪裁路径，之后绘制的路径只有在里面的才会显示。线条样式
线条样式

canvas.lineWidth//线条宽度，主使用场景是描边，默认宽度是1.0，支持小数。

canvas.lineCap//线条端点的样式。支持如下属性值：butt（默认值，断头，无端帽），round（圆形端帽），square（方形端帽）。

canvas.lineJoin//线条转角的样式。支持如下属性值：miter（默认值，尖角），round（圆角），bevel（平角）。

canvas.miterLimit//尖角限制比率。线条的尖角如果没有限制，在线条粗角度小的情况下会很长很长，因此，需要一个限制比率。默认是10。

canvas.getLineDash()//返回当前虚线数值。返回值是一个偶数个数的数组

canvas.setLineDash()//设置线条为虚线。

canvas.lineDashOffset//设置虚线的起始偏移。
canvas.lineWidth//线条宽度，主使用场景是描边，默认宽度是1.0，支持小数。canvas.lineCap//线条端点的样式。支持如下属性值：butt（默认值，断头，无端帽），round（圆形端帽），square（方形端帽）。canvas.lineJoin//线条转角的样式。支持如下属性值：miter（默认值，尖角），round（圆角），bevel（平角）。canvas.miterLimit//尖角限制比率。线条的尖角如果没有限制，在线条粗角度小的情况下会很长很长，因此，需要一个限制比率。默认是10。canvas.getLineDash()//返回当前虚线数值。返回值是一个偶数个数的数组canvas.setLineDash()//设置线条为虚线。canvas.lineDashOffset//设置虚线的起始偏移。位置检测
位置检测


canvas.isPointInPath()//当前点是否在指定路径内。

canvas.isPointInStroke()//当前点是否在指定路径描边上。
canvas.isPointInPath()//当前点是否在指定路径内。canvas.isPointInStroke()//当前点是否在指定路径描边上。变换
变换


canvas.rotate()//旋转。

canvas.scale()//缩放。

canvas.translate()//位移。

canvas.transform()//当前矩阵变换基础上再次矩阵变换。

canvas.setTransform()//直接重置为当前设置的矩阵变换。
canvas.rotate()//旋转。canvas.scale()//缩放。canvas.translate()//位移。canvas.transform()//当前矩阵变换基础上再次矩阵变换。canvas.setTransform()//直接重置为当前设置的矩阵变换。透明度和层级
透明度和层级

canvas.globalAlpha//全局透明度。

canvas.globalCompositeOperation//设置图形叠加时候的混合方式，可以用来改变绘制元素上下叠加关系，也就是层级。
canvas.globalAlpha//全局透明度。canvas.globalCompositeOperation//设置图形叠加时候的混合方式，可以用来改变绘制元素上下叠加关系，也就是层级。图片与像素
图片与像素
canvas.drawImage()//图片绘制在画布上。
//drawImage 优化: 离屏绘制:
/* 上一节提到，绘制同样的一块区域，如果数据源是尺寸相仿的一张图片，那么性能会比较好，
而如果数据源是一张大图上的一部分，性能就会比较差，因为每一次绘制还包含了裁剪工作。也许，
我们可以先把待绘制的区域裁剪好，保存起来，这样每次绘制时就能轻松很多。
drawImage 方法的第一个参数不仅可以接收 Image 对象，也可以接收另一个 Canvas 对象。
而且，使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。
我们只需要实现将对象绘制在一个未插入页面的 Canvas 中，然后每一帧使用这个 Canvas 来绘制
*/
canvas.createImageData()//创建一个新的空白的ImageData对象。
canvas.getImageData()//获取Canvas画布的设定区域的ImageData对象。
canvas.putImageData()//给定的ImageData对象应用在Canvas画布上。Canvas状态
Canvas状态

Canvas状态管理几个方法。

canvas.save()//存储当前Canvas的状态。

canvas.restore()//恢复Canvas到前一次存储的状态。

canvas.canvas//反向识别当前上下文源自哪个HTMLCanvasElement。
Canvas状态管理几个方法。canvas.save()//存储当前Canvas的状态。canvas.restore()//恢复Canvas到前一次存储的状态。canvas.canvas//反向识别当前上下文源自哪个HTMLCanvasElement。其他方法
其他一些不常用的API方法。


canvas.drawFocusIfNeeded()//如果给定元素被聚焦，则该方法在当前路径周围绘制焦点环。

canvas.scrollPathIntoView()//将当前路径或给定路径滚动到视图中。
canvas.drawFocusIfNeeded()//如果给定元素被聚焦，则该方法在当前路径周围绘制焦点环。canvas.scrollPathIntoView()//将当前路径或给定路径滚动到视图中。CanvasGradient
CanvasGradient方法
addColorStop()//给渐变增加新的渐变点ImageBitmap
ImageBitmap属性
height//只读。是无符号长整数，表示ImageBitmap对象的CSS像素高度
width//只读。是无符号长整数，表示ImageBitmap对象的CSS像素宽度
方法
close()//处置所有与ImageBitmap关联的图形资源
ImageData
ImageData属性
data//只读。是一个包含RGBA像素信息的Uint8ClampedArray，数组中所有的值都是整数，范围是0~255
height//只读。是无符号长整数，表示ImageData对应的实际像素高度
width//只读。是无符号长整数，表示ImageData对应的实际像素宽度TextMetrics
TextMetrics
属性
width//只读。表示当前文本占据的CSS像素宽度
CanvasImageSource
CanvasImageSource无暴露属性，无继承方法。CanvasPattern
CanvasPattern无暴露属性，无继承方法。
RenderingContext
RenderingContext无暴露属性，无继承方法。以上就是小编整理的全部相关内容，希望能够帮助到你。