了解CanvasRenderingContext2D

    简介

    CanvasRenderingContext2D顾名思义就是“Canvas 2D渲染上下文”,可以理解为下面代码中的context

    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');

    context暴露了大量的API属性和方法,可以用来绘制文本,图形以及像素处理等,可以说是2D Canvas应用的核心所在。

    按照功能,可以对这些暴露的标准API属性和方法进行如下的分组:

    绘制矩形

    下面就是Canvas中与矩形绘制相关的几个方法。

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

    绘制文本

    下面就是Canvas中与文本绘制相关的几个方法。

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

    线条样式

    下面就是与Canvas中与线条样式相关的若干属性和方法。

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

    文本样式

    下面就是与Canvas中与文本样式相关的若干属性和方法。

    CanvasRenderingContext2D.font
    设置字体相关样式,包括字号,字体信息。默认值是10px sans-serif
    CanvasRenderingContext2D.textAlign
    设置文本水平对齐方式。支持属性值有:start(默认值),endleftright以及center
    CanvasRenderingContext2D.textBaseline
    设置文本基线对齐方式。支持属性值有:tophangingmiddlealphabetic(默认值),ideographicbottom
    CanvasRenderingContext2D.direction
    设置文本显示方向。支持属性值有:inherit(默认值),ltrrtl

    填充和描边

    就是下面这两个属性和两个方法,是高频使用的API。

    CanvasRenderingContext2D.fillStyle
    填充样式。默认值是#000000纯黑色。
    CanvasRenderingContext2D.fill()
    填充。
    CanvasRenderingContext2D.strokeStyle
    描边样式。默认值是#000000纯黑色。
    CanvasRenderingContext2D.stroke()
    描边。

    渐变相关

    Canvas中与渐变相关的方法就是创建线性渐变和径向渐变这两个方法。

    CanvasRenderingContext2D.createLinearGradient()
    创建线性渐变。
    CanvasRenderingContext2D.createRadialGradient()
    创建径向渐变。

    图案相关

    Canvas中与图案相关的方法就是创建图案对象方法。

    CanvasRenderingContext2D.createPattern()
    创建图案。图案内容可以是图片,可以是<canvas>元素,也可以是渐变。此方法返回CanvasPattern对象。

    阴影相关

    Canvas中与阴影相关的属性就是下面这些。

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

    绘制路径

    下面的方法可以用来处理路径对象。

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

    位置检测

    下面这两个方法可以判定某个坐标点是否路径或者描边中。

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

    变换

    旋转缩放等变换方法。

    CanvasRenderingContext2D.rotate()
    旋转。
    CanvasRenderingContext2D.scale()
    缩放。
    CanvasRenderingContext2D.translate()
    位移。
    CanvasRenderingContext2D.transform()
    当前矩阵变换基础上再次矩阵变换。
    CanvasRenderingContext2D.setTransform()
    直接重置为当前设置的矩阵变换。

    透明度和层级

    一个是控制全局透明度,另外一个可以改变层级关系,设置混合模式,以及实现遮罩效果等。

    CanvasRenderingContext2D.globalAlpha
    全局透明度。
    CanvasRenderingContext2D.globalCompositeOperation
    设置图形叠加时候的混合方式,可以用来改变绘制元素上下叠加关系,也就是层级。

    图片与像素

    绘制图片和图像像素信息处理方法。

    CanvasRenderingContext2D.drawImage()
    图片绘制在画布上。
    CanvasRenderingContext2D.createImageData()
    创建一个新的空白的ImageData对象。
    CanvasRenderingContext2D.getImageData()
    获取Canvas画布的设定区域的ImageData对象。
    CanvasRenderingContext2D.putImageData()
    给定的ImageData对象应用在Canvas画布上。

    Canvas状态

    Canvas状态管理几个方法。

    CanvasRenderingContext2D.save()
    存储当前Canvas的状态。
    CanvasRenderingContext2D.restore()
    恢复Canvas到前一次存储的状态。
    CanvasRenderingContext2D.canvas
    反向识别当前上下文源自哪个HTMLCanvasElement

    其他方法

    其他一些不常用的API方法。

    CanvasRenderingContext2D.drawFocusIfNeeded()
    如果给定元素被聚焦,则该方法在当前路径周围绘制焦点环。
    CanvasRenderingContext2D.scrollPathIntoView()
    将当前路径或给定路径滚动到视图中。

     


    by zhangxinxu 2019-04-05 20:47:15