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"。