createPattern(element,repetition)

创建一个可以用来在canvas中对图形和文本进行填充与描边的图案.参数1是Dom元素,image|canvas|video,参数2是重复模式repeat,repeat-x,repeat-y,no-repeat

  ctx.createPattern(img,'repeat')

示例使用代码

    // 使用一个image对象
    let img=document.getElementById('img1');
    // 调用此方法得到对象
    let gradient = ctx.createPattern(img,'repeat');
    // 赋值给样式属性
    ctx.fillStyle = gradient;
    // 绘画
    ctx.fillRect(0, 0, 300, 150);

参数

HTMLElement 图片源: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

DomString 模式: repeat,repeat-x,repeat-y,no-repeat


测验

使用图片填充,填充方式类似于css背景图background-image,可以选择水平,垂直或者不平铺.图片源可以是Image,Canvas,Video元素.

下图是在水平与垂直方向重复

水平重复repeat-x,垂直重复repeat-y,不重复no-repeat

<<H5核心技术图形动画与游戏开发(David Geary)>> (57页)