紋理其實就是圖案的重復，填充圖案通過createPattern()函數(shù)進行初始化。它需要傳進兩個參數(shù)createPattern(img,repeat-style)，第一個是Image對象實例，第二個參數(shù)是String類型，表示在形狀中如何顯示repeat圖案?？梢允褂眠@個函數(shù)加載圖像或者整個畫布作為形狀的填充圖案。

有以下4種圖像填充類型：

平面上重復：repeat;
x軸上重復：repeat-x;
y軸上重復：repeat-y;
不使用重復：no-repeat;

其實createPattern()的第一個參數(shù)還可以傳入一個canvas對象或者video對象，這里我們只講解Image對象，其余的大家自己嘗試。

創(chuàng)建并填充圖案

首先看一下怎么加載圖像：

創(chuàng)建Image對象
為Image對象指定圖片源

代碼如下：

var img = new Image();  //創(chuàng)建Image對象
img.src = "8-1.jpg";    //為Image對象指定圖片源

擴展：HTML中的相對路徑

'./目錄或文件名' 或者 '目錄或文件名' 是指當前操作的文件所在目錄的路徑

'../目錄或文件名' 是指當前所操作的文件所在目錄的上一級目錄的路徑

之后填充紋理：

var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;

我們直接看一段完整的程序，這里我要重復填充這個萌萌的長頸鹿作為紋理。需要注意的是，選擇圖片時一定要選擇那種左右互通，上下互通的圖片做為紋理，這樣看上去才不會有不自然的短接處。

萌萌的長頸鹿

安利一個網站。這張圖取自優(yōu)美圖網，這個網站非常贊，里面的圖片非常漂亮而且種類繁多，最重要的是它是免費的?。?！我從初中開始就一直使用這個網站來找素材。并且最近又推出了APP，有Android和iOS端，推薦大家下載使用。（這是個秘密，我一般不告訴別人的。）

下面提供代碼。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>填充紋理</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        var img = new Image();
        img.src = "8-1.jpg";
        img.onload = function(){
            var pattern = context.createPattern(img, "repeat");
            context.fillStyle = pattern;
            context.fillRect(0,0,800,600);
        }

    }
</script>
</body>
</html>

演示 8-1

運行結果：

很多個萌萌的長頸鹿

這里使用了Image的onload事件，它的作用是對圖片進行預加載處理，即在圖片加載完成后才立即除非其后function的代碼體。這個是必須的，如果不寫的話，畫布將會顯示黑屏。因為沒有等待圖片加載完成就填充紋理，導致瀏覽器找不到圖片。

這里使用了"repeat"，童鞋們也可嘗試使用一下其他三個值，看看會有什么不同的效果。也可以自己找一下其他的圖片嘗試填充，看看效果。

還有，長頸鹿是不是特別萌？看來我們已經是個藝術家了呢！這節(jié)內容很少，我們繼續(xù)前進！

上一篇：Ch11 二次貝塞爾曲線下一篇：Ch17 文本顯示與渲染

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch8 填充樣式

createPattern()簡介

創(chuàng)建并填充圖案

`createPattern()`簡介