canvas createPattern()方法詳解

createPattern做用

createPattern() 方法在指定的方向內重複指定的元素。

元素能夠是圖片、視頻，或者其餘 <canvas> 元素。

被重複的元素可用於繪製/填充矩形、圓形或線條等等。

網站http://www.w3school.com.cn/tags/canvas_createpattern.asp中基本介紹

語法：

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

createPattern參數值

參數	描述
image	規定要使用的圖片、畫布或視頻元素。
repeat	默認。該模式在水平和垂直方向重複。
repeat-x	該模式只在水平方向重複。
repeat-y	該模式只在垂直方向重複。
no-repeat	該模式只顯示一次（不重複）。

createPattern用法舉例

1）使用圖片填充

使用到的圖片：

 

 

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         }

 

填充位置

另外須要注意的是，在第一個代碼實例中，若是咱們將矩形的起始座標x調整下，渲染出來的效果以下圖所示。

經過這個效果你應該能清楚，填充的起始位置是畫布的原點，並非要填充圖形rect的起始位置。

 

應用實例

刮塗層贏大獎

前面咱們的實例中都是用createpattern填充矩形，若是是填充畫線stroke的話也是能夠的，下面簡單實現一個刮塗層的示例，結合鼠標拖拽繪製線條的代碼，效果以下：

 

 

 

 

 

原文出處：https://www.cnblogs.com/fangsmile/p/10078029.html