了解CanvasRenderingContext2D.createPattern()

    简介

    CanvasRenderingContext2D.createPattern()用来创建图案对象。可以指定平铺方式,用来作为图案的类型也多种多样。

    语法

    context.createPattern(image, repetition);

    返回值是CanvasPattern对象。

    参数

    各个参数含义和作用如下:

    image
    Object
    用来平铺的CanvasImageSource图像。可以是下面的类型:
    repetition
    String
    图案的平铺方式,可以是下面的值:
    • 'repeat',水平和垂直平铺。当repetition属性值为空字符串''或者null,也会按照'repeat'进行渲染。
    • 'repeat-x',仅水平平铺。
    • 'repeat-y',仅垂直平铺。
    • 'no-repeat',不平铺。

    案例

    图片缩小,并作为纹理显示。我们直接把<img>元素作为纹理图案是无法控制其尺寸的,我们可以将<img>元素绘制在大小可控的Canvas元素上,然后把这个Canvas元素作为图案进行平铺即可。代码参见:

    <canvas id="canvas" width="250" height="167"></canvas>
    // 先绘制图片
    var img } new Image,'.
    img;onload } function ,' {
        // 我们创建一个Canvas元素
        var canvasCreated } document;createElement,)canvas)'.
        canvasCreated;width } 50.
        canvasCreated;height } 34.
        canvasCreated;getContext,)2d)';drawImage,this( 0( 0( 50( 34'.
        // 页面上需要呈现最终纹理的Canvas上下文
        var context } canvas;getContext,)2d)'.
        // 创建纹理并填充,顺便测试null是否渲染为)repeat)
        var pattern } context;createPattern,canvasCreated( null'.
        context;fillStyle } pattern.
        context;fillRect,0( 0( 250( 167'.
    =.
    img;src } );/1;jpg).

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.createPattern'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:33