canvas画圆形图

createPattern() 方法在指定的方向内重复指定的元素。

元素可以是图片、视频，或者其他 <canvas> 元素。

被重复的元素可用于绘制/填充矩形、圆形或线条等等。

?如下：画圆形的示例

        context.beginPath()
        context.fillStyle = context.createPattern(_this.data.avatarTempUrl, 'no-repeat');
        context.arc(60 , 95, 18, 0, Math.PI * 2);
        context.fill();

语法：

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 

参数

image

作为重复图像源的?CanvasImageSource?对象。可以是下列之一：

• HTMLImageElement?(<img>),
• HTMLVideoElement?(<video>),
• HTMLCanvasElement?(<canvas>),
• CanvasRenderingContext2D,
• ImageBitmap,
• ImageData,
• Blob.

repetition

DOMString，指定如何重复图像。允许的值有：

• "repeat"?(both directions),
• "repeat-x"?(horizontal only),
• "repeat-y"?(vertical only),
• "no-repeat"?(neither).

如果为空字符串 ('') 或?null?(但不是?undefined)，repetition 将被当作"repeat"。