当前位置 博文首页 > 文章内容

    CanvasRenderingContext2D 整理

    作者:天马3798 栏目:未分类 时间:2020-10-17 15:03:56

    一、CanvasRenderingContext2D 属性

     

    canvas : 当前元素对象

    globalAlpha: 全局透明度,范围是0到1,范围以外的值会被忽略

    globalCompositeOperation: 可以用来设置Canvas图形的混合模式。可以衍生很多其他效果,以及改变绘制图形的上下层叠关系。

    fillStyle :

    color
    使用纯色填充,支持RGB,HSL,RGBA,HSLA以及HEX色值。
    gradient
    使用渐变填充,可以是线性渐变或者径向渐变。
    pattern
    使用纹理填充。由于图片也能作为纹理,因此fillStyle也能填充普通的位图

    文字设置:

    font: value就是字号字体值,其规则和CSS的font很类似,除了一些很微小的细节差异,其他几乎没什么区别

    textAlign:文本水平对齐方式,和CSS的text-align属性值类似,支持left,right,centerstart,end这些值

    textBaseline:指定文本对齐的基线,

    其中value支持如下几个关键字:
    
    top
    设定的垂直y坐标作为文本em区域(em区域可以看成中文字符占据的区域)的顶部。
    hanging
    hanging主要在藏文和其他印度文字中使用,我们了解即可。
    middle
    设定的垂直y坐标作为文本em区域的垂直中心位置。
    alphabetic
    默认值。表示的是正常文本的基线,可以看成是字母x的下边缘。也就是设定的垂直y坐标就是字母x的下边缘。
    ideographic
    ideographic主要在汉语、日语和韩语中使用。字面直译是表意基线。含义为:如果字符的主体突出在字母基线之下,则这是字符主体的底部。例如汉字“中”比字母x位置更低,因此,底部是汉字主体的底部。
    bottom
    设定的垂直y坐标作为文本em区域的底部。

     

    线段相关:
    lineCap: 表示线条端点的样式

    butt
    默认值,线的端点就像是个断头台,例如一条横线,终点x坐标是100,则这条线的最右侧边缘就是100这个位置,没有超出。
    round
    线的端点多出一个圆弧。
    square
    线的端点多出一个方框,框框的宽度和线一样宽,高度是线厚度的一半。

    lineDashOffset:value 表示虚线起始绘制的偏移距离,为浮点型,默认值是0.0。

    lineJoin: 表示线条转角的样式,支持:miter,round,bevel
    lineWidth:value 表示线的宽度。数值类型,默认值是1.0。如果是负数,0,NaN,或者Infinity都会忽略。

    miterLimit:value表示多大范围内转角表现为miter的宽度。数值类型,默认值是10.0。如果是负数,0,NaN,或者Infinity都会忽略。

    strokeStyle:可以是路径的描边,也可以是是形状的描边,也可以是文字的描边。描边的样式也不仅限于颜色。

    color
    描边设置为颜色。
    gradient
    描边设置为渐变。
    pattern
    描边设置为图案。

     

    阴影设置:

    shadowBlur:可以用来指定阴影的模糊程度。默认值是0,表示不模糊。

    shadowColor:可以用来指定阴影的颜色。默认值是透明黑,也就是看不到颜色,因此,如果我们想要使用阴影效果,shadowColor是必须要指定的。

    shadowOffsetX:表示阴影的水平偏移大小。
    shadowOffsetY:表示阴影的垂直偏移大小。



    二、CanvasRenderingContext2D 方法

     

    1.绘制文字

    fileText()

    用来填充文字,是Canvas绘制文本的主力方法。

    context.fillText(text, x, y [, maxWidth]);
    参数
    各个参数含义和作用如下:
    
    textString
    用来填充的文本信息。
    xNumber
    填充文本的起点横坐标。
    yNumber
    填充文本的起点纵坐标。
    maxWidth(可选)Number ,指定最大宽度,每个文本宽度进行适合,而非换行

    strokeText()

    实现文本描边效果。此描边为居中描边。

    context.strokeText(text, x, y [, maxWidth]);

    参数同上

     measureText()

    可以用来测量文本的一些数据,返回 TextMetrics.

    context.measureText(text)

    返回值:TextMetrics,含有文本的宽度

    TextMetrics.width
    只读。表示当前文本占据的CSS像素宽度。

     

    2.绘制区域

     

    3.绘制路径

     

    4.缩放变形

     

    5.绘制图片

     

    6.其他常用方法

     

     

    更多:

    HTMLCanvasElement 整理 

    Canvas 实现圆圈进度展示/进度动画 

    canvas应用——将方形图片处理为圆形