如何使用HTML5Canvas為圖片填充顏色和紋理

這篇文章將為大家詳細(xì)講解有關(guān)如何使用HTML5 Canvas為圖片填充顏色和紋理，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都活動(dòng)板房等企業(yè)提供專業(yè)服務(wù)。

填充顏色

藝術(shù)離不開(kāi)色彩，今天咱們來(lái)介紹一下填充顏色，體會(huì)一下色彩的魅力。
填充顏色主要分為兩種：

1.基本顏色
2.漸變顏色（又分為線性漸變與徑向漸變）

我們一個(gè)個(gè)來(lái)看。


填充基本顏色
Canvas fillStyle屬性用來(lái)設(shè)置畫(huà)布上形狀的基本顏色和填充。fillStyle使用簡(jiǎn)單的顏色名稱。這看起來(lái)非常簡(jiǎn)單，例如:

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "red";  

下面是出自 HTML4 規(guī)范的可用顏色字符串值列表，共十六個(gè)。由于 HTML5 沒(méi)有修改專屬的顏色，HTML4 的顏色都可以在 HTML5 中正確顯示。
如何使用HTML5 Canvas為圖片填充顏色和紋理

所有這些顏色值都可以應(yīng)用到 strokeStyle 屬性和 fillStyle 屬性中。
好了，我來(lái)總結(jié)一下填充基本色的方法：（也可用于strokeStyle屬性）
（1） 使用顏色字符串填充。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "red";  

（2）使用十六進(jìn)制數(shù)字字符串填充。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "#FF0000";  

（3）使用十六進(jìn)制數(shù)字字符串簡(jiǎn)寫(xiě)形式填充。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "#F00";  

（4）使用rgb()方法設(shè)置顏色。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "rgb(255,0,0)";  

（5）使用rgba()方法設(shè)置顏色。
JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "rgba(255,0,0,1)";  

此方法最后一個(gè)參數(shù)傳遞的是alpha值，透明度范圍為1（不透明）~0（透明）。
（6）使用hsl()方法設(shè)置顏色。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "hsl(0,100%,50%)";  

HSL即是代表色相（H），飽和度（S），明度（L）三個(gè)通道的顏色。
（7）使用hsla()方法設(shè)置顏色。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. context.fillStyle = "hsla(0,100%,50%,1)";  

以上7句代碼都是填充"#FF0000"這個(gè)紅色。


填充漸變形狀
在畫(huà)布上創(chuàng)建漸變填充有兩個(gè)基本選項(xiàng)：線性或徑向。線性漸變創(chuàng)建一個(gè)水平、垂直或者對(duì)角線的填充圖案。徑向漸變自中心點(diǎn)創(chuàng)建一個(gè)放射狀填充。填充漸變形狀分為三步：添加漸變線，為漸變線添加關(guān)鍵色，應(yīng)用漸變。下面是它們的一些示例。
線性漸變
三步走戰(zhàn)略：
添加漸變線：

JavaScript Code復(fù)制內(nèi)容到剪貼板

vargrd = context.createLinearGradient(xstart,ystart,xend,yend);


為漸變線添加關(guān)鍵色(類似于顏色斷點(diǎn))：

JavaScript Code復(fù)制內(nèi)容到剪貼板

grd.addColorStop(stop,color);


這里的stop傳遞的是 0 ~ 1 的浮點(diǎn)數(shù)，代表斷點(diǎn)到(xstart,ystart)的距離占整個(gè)漸變色長(zhǎng)度是比例。

應(yīng)用漸變：

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.fillStyle = grd;   
context.strokeStyle = grd;


寫(xiě)個(gè)代碼來(lái)看看。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. <!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？！趕快換一個(gè)吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.rect(200,100,400,400);   
  
        //添加漸變線   
        var grd = context.createLinearGradient(200,300,600,300);   
  
        //添加顏色斷點(diǎn)   
        grd.addColorStop(0,"black");   
        grd.addColorStop(0.5,"white");   
        grd.addColorStop(1,"black");   
  
        //應(yīng)用漸變   
        context.fillStyle = grd;   
  
        context.fill();   
  
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
如何使用HTML5 Canvas為圖片填充顏色和紋理

我覺(jué)得有必要做一個(gè)圖解，方便大家一次性理解漸變。
如何使用HTML5 Canvas為圖片填充顏色和紋理

為了方便理解，建議把漸變線看成是一個(gè)有向線段。如果熟悉PS等繪圖工具，用過(guò)其中的漸變色設(shè)置，應(yīng)該會(huì)很好理解。
這里漸變線的起點(diǎn)和終點(diǎn)不一定要在圖像內(nèi)，顏色斷點(diǎn)的位置也是一樣的。但是如果圖像的范圍大于漸變線，那么在漸變線范圍之外，就會(huì)自動(dòng)填充離端點(diǎn)最近的斷點(diǎn)的顏色。
這里配合兩個(gè)補(bǔ)充函數(shù)再舉一例。

繪制矩形的快捷方法

fillRect(x,y,width,height)、stroke(x,y,width,height)。這兩個(gè)函數(shù)可以分別看做rect()與fill()以及rect()與stroke()的組合。因?yàn)閞ect()僅僅只是規(guī)劃路徑而已，而這兩個(gè)方法確實(shí)實(shí)實(shí)在在的繪制。

JavaScript Code復(fù)制內(nèi)容到剪貼板   

  1. <!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？！趕快換一個(gè)吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        //添加漸變線   
        var grd = context.createLinearGradient(100,300,700,300);   
  
        //添加顏色斷點(diǎn)   
        grd.addColorStop(0,"olive");   
        grd.addColorStop(0.25,"maroon");   
        grd.addColorStop(0.5,"aqua");   
        grd.addColorStop(0.75,"fuchsia");   
        grd.addColorStop(0.25,"teal");   
  
        //應(yīng)用漸變   
        context.fillStyle = grd;   
        context.strokeStyle = grd;   
  
        context.strokeRect(200,50,300,50);   
        context.strokeRect(200,100,150,50);   
        context.strokeRect(200,150,450,50);   
  
        context.fillRect(200,300,300,50);   
        context.fillRect(200,350,150,50);   
        context.fillRect(200,400,450,50);   
  
        context.fillRect(0,550,800,25);   
  
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
如何使用HTML5 Canvas為圖片填充顏色和紋理

這兩個(gè)頁(yè)面都是水平漸變，但是要清楚線性漸變不一定是水平的，方向可以是任意的，通過(guò)漸變線的端點(diǎn)來(lái)設(shè)置方向。

徑向漸變
同樣是三步走戰(zhàn)略，只不過(guò)是第一步的所用方法變了。
添加漸變圓：

JavaScript Code復(fù)制內(nèi)容到剪貼板

var
 grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

為漸變線添加關(guān)鍵色(類似于顏色斷點(diǎn))：

JavaScript Code復(fù)制內(nèi)容到剪貼板

grd.addColorStop(stop,color);

 


應(yīng)用漸變：

JavaScript Code復(fù)制內(nèi)容到剪貼板

context.fillStyle = grd;   
context.strokeStyle = grd;


線性漸變是基于兩個(gè)端點(diǎn)定義的，但是徑向漸變是基于兩個(gè)圓定義的。
我們把示例7-2改寫(xiě)一下。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. <!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？！趕快換一個(gè)吧??！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        //添加漸變線   
        var grd = context.createRadialGradient(400,300,100,400,300,200);   
  
        //添加顏色斷點(diǎn)   
        grd.addColorStop(0,"olive");   
        grd.addColorStop(0.25,"maroon");   
        grd.addColorStop(0.5,"aqua");   
        grd.addColorStop(0.75,"fuchsia");   
        grd.addColorStop(0.25,"teal");   
  
        //應(yīng)用漸變   
        context.fillStyle = grd;   
  
        context.fillRect(100,100,600,400);   
  
  
    }   
</script>   
</body>   
</html>

運(yùn)行結(jié)果：
如何使用HTML5 Canvas為圖片填充顏色和紋理

怎么感覺(jué)這個(gè)顏色搭配那么的&hellip;&hellip;算了，這個(gè)就叫做藝術(shù)。
createRadialGradient(x0,y0,r0,x1,y1,r1);方法規(guī)定了徑向漸變開(kāi)始和結(jié)束的范圍，即兩圓之間的漸變。
總結(jié)一下，這節(jié)課我們學(xué)習(xí)了fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、strokeRect()等屬性和方法，詳細(xì)介紹了填充基本色、線性漸變、徑向漸變。
好了，現(xiàn)在學(xué)會(huì)了上色，那么盡情的使用色彩，繪制出屬于我們自己的藝術(shù)品吧！

填充紋理

createPattern()簡(jiǎn)介
紋理其實(shí)就是圖案的重復(fù)，填充圖案通過(guò)createPattern()函數(shù)進(jìn)行初始化。它需要傳進(jìn)兩個(gè)參數(shù)createPattern(img,repeat-style)，第一個(gè)是Image對(duì)象實(shí)例，第二個(gè)參數(shù)是String類型，表示在形狀中如何顯示repeat圖案。可以使用這個(gè)函數(shù)加載圖像或者整個(gè)畫(huà)布作為形狀的填充圖案。
有以下4種圖像填充類型：

1.平面上重復(fù)：repeat;
2.x軸上重復(fù)：repeat-x;
3.y軸上重復(fù)：repeat-y;
4.不使用重復(fù)：no-repeat;

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


創(chuàng)建并填充圖案
首先看一下怎么加載圖像：

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

代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. var img = new Image();    //創(chuàng)建Image對(duì)象   
img.src = "8-1.jpg";    //為Image對(duì)象指定圖片源  
擴(kuò)展：HTML中的相對(duì)路徑'./目錄或文件名' 或者 '目錄或文件名' 是指當(dāng)前操作的文件所在目錄的路徑'../目錄或文件名' 是指當(dāng)前所操作的文件所在目錄的上一級(jí)目錄的路徑
之后填充紋理：
JavaScript Code復(fù)制內(nèi)容到剪貼板
var pattern = context.createPattern(img,"repeat");   
context.fillStyle = pattern;

我們直接看一段完整的程序，這里我要重復(fù)填充這個(gè)萌萌的長(zhǎng)頸鹿作為紋理。需要注意的是，選擇圖片時(shí)一定要選擇那種左右互通，上下互通的圖片做為紋理，這樣看上去才不會(huì)有不自然的短接處。
如何使用HTML5 Canvas為圖片填充顏色和紋理

下面提供代碼。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. <!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？！趕快換一個(gè)吧??！   
    </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>

運(yùn)行結(jié)果：
如何使用HTML5 Canvas為圖片填充顏色和紋理

這里使用了Image的onload事件，它的作用是對(duì)圖片進(jìn)行預(yù)加載處理，即在圖片加載完成后才立即除非其后function的代碼體。這個(gè)是必須的，如果不寫(xiě)的話，畫(huà)布將會(huì)顯示黑屏。因?yàn)闆](méi)有等待圖片加載完成就填充紋理，導(dǎo)致瀏覽器找不到圖片。

關(guān)于如何使用HTML5 Canvas為圖片填充顏色和紋理就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)標(biāo)題：如何使用HTML5Canvas為圖片填充顏色和紋理
文章起源：http://bm7419.com/article2/gipgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、電子商務(wù)、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司