名稱	名稱字符串	十六進(jìn)制數(shù)字字符串
黑色	Black	#000000s
綠色	Green	#008000
銀色	Silver	#C0C0C0
石灰色	Lime	#00FF00
灰色	Gray	#808080
橄欖色	Olive	#808000
白色	White	#FFFFFF
黃色	Yellow	#FFFF00
栗色	Maroon	#800000
海藍(lán)色	Navy	#000080
紅色	Red	#FF0000
藍(lán)色	Blue	#0000FF
紫色	Purple	#800080
深藍(lán)綠色	Teal	#008080
紫紅色	Fuchsia	#FF00FF
淺藍(lán)綠色	Aqua	#00FFFF

所有這些顏色值都可以應(yīng)用到 strokeStyle 屬性和 fillStyle 屬性中。

好了，我來總結(jié)一下填充基本色的方法：（也可用于strokeStyle屬性）

（1）使用顏色字符串填充。

context.fillStyle = "red";

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

context.fillStyle = "#FF0000";

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

context.fillStyle = "#F00";

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

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

（5）使用rgba()方法設(shè)置顏色。

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

此方法最后一個參數(shù)傳遞的是alpha值，透明度范圍為1（不透明）~0（透明）。

（6）使用hsl()方法設(shè)置顏色。

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

HSL即是代表色相（H），飽和度（S），明度（L）三個通道的顏色。

（7）使用hsla()方法設(shè)置顏色。

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

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

填充漸變形狀

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

線性漸變

三步走戰(zhàn)略：

添加漸變線：

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

為漸變線添加關(guān)鍵色(類似于顏色斷點)：
```
grd.addColorStop(stop,color);
```

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

應(yīng)用漸變：

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

寫個代碼來看看。

<!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");

        context.rect(200,100,400,400);

        //添加漸變線
        var grd = context.createLinearGradient(200,300,600,300);

        //添加顏色斷點
        grd.addColorStop(0,"black");
        grd.addColorStop(0.5,"white");
        grd.addColorStop(1,"black");

        //應(yīng)用漸變
        context.fillStyle = grd;

        context.fill();

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

演示 7-1

運(yùn)行結(jié)果：

線性漸變

我覺得有必要做一個圖解，方便大家一次性理解漸變。漸變線圖解

為了方便理解，建議把漸變線看成是一個有向線段。如果熟悉PS等繪圖工具，用過其中的漸變色設(shè)置，應(yīng)該會很好理解。

這里漸變線的起點和終點不一定要在圖像內(nèi)，顏色斷點的位置也是一樣的。但是如果圖像的范圍大于漸變線，那么在漸變線范圍之外，就會自動填充離端點最近的斷點的顏色。

這里配合兩個補(bǔ)充函數(shù)再舉一例。

繪制矩形的快捷方法

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

<!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 grd = context.createLinearGradient(100,300,700,300);

        //添加顏色斷點
        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>

演示 7-2

運(yùn)行結(jié)果：

復(fù)雜的線性漸變

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

徑向漸變

同樣是三步走戰(zhàn)略，只不過是第一步的所用方法變了。

添加漸變圓：

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

為漸變線添加關(guān)鍵色(類似于顏色斷點)：
```
grd.addColorStop(stop,color);
```

應(yīng)用漸變：

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

線性漸變是基于兩個端點定義的，但是徑向漸變是基于兩個圓定義的。

我們把示例7-2改寫一下。

<!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 grd = context.createRadialGradient(400,300,100,400,300,200);

        //添加顏色斷點
        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>

演示 7-3

運(yùn)行結(jié)果：

徑向漸變

怎么感覺這個顏色搭配那么的……算了，這個就叫做藝術(shù)。

createRadialGradient(x0,y0,r0,x1,y1,r1);方法規(guī)定了徑向漸變開始和結(jié)束的范圍，即兩圓之間的漸變。

總結(jié)一下，這節(jié)課我們學(xué)習(xí)了fillStyle、createLinearGradient()、createRadialGradient()、addColorStop()、fillRect()、strokeRect()等屬性和方法，詳細(xì)介紹了填充基本色、線性漸變、徑向漸變。

好了，現(xiàn)在學(xué)會了上色，那么盡情的使用色彩，繪制出屬于我們自己的藝術(shù)品吧！

上一篇：Ch16 矩陣變換下一篇：Ch5 繪制矩形

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

Ch7 填充顏色

填充基本顏色

填充漸變形狀

線性漸變

繪制矩形的快捷方法

徑向漸變