canvas createPattern()方法详解

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

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

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

网站中基本介绍

语法:

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); createPattern参数值 参数 描述
image   规定要使用的图片、画布或视频元素。  
repeat   默认。该模式在水平和垂直方向重复。  
repeat-x   该模式只在水平方向重复。  
repeat-y   该模式只在垂直方向重复。  
no-repeat   该模式只显示一次(不重复)。  

createPattern用法举例 1)使用图片填充

使用到的图片:

canvas createPattern()方法详解

 

 

repeat的几种方式,大家可以在jsfiddle上修改代码运行看看效果。

也许你觉得这个图标太大了,想让它变得更小更密,所以想改变image的宽高是否能实现这个效果呢?事实是不能,canvas只会将按照原图大小填充。那怎么解决这个问题呢?

这就用到了下面使用canvas填充的方式

2)使用canvas填充

创建一个临时的canvas,用canvas 的drawImg()方法,对图片进行缩放,然后在再把canvas 传到createPattern里面。以此达到createPattern缩放内容的效果。

 

3)使用视频填充

和图片填充类似,只需要在createpattern使用video标签即可,但是你也会发现绘制的重复内容只是视频的第一帧内容

1 var c = document.getElementById("canvas"); 2 var ctx = c.getContext("2d"); 3 var video = document.createElement("video") 4 video.src = "https://dl.xueleyun.com/files/mp4_3e100520985a66003c1b9a104fd36143.mp4" 5 video.onloadeddata = function () { 6 var pat = ctx.createPattern(video, "repeat"); 7 ctx.rect(60, 10, c.width - 20, c.height - 20); 8 ctx.fillStyle = pat; 9 ctx.fill(); 10 }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyywg.html