第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

水車_ · 更新于 2021-08-02

描邊填充漸變顏色

1. 前言

我們已經(jīng)學習了描邊和填充單一顏色的方法，本小節(jié)我們將學習如何用漸變色描邊和填充圖形。

2. 什么是漸變色

開始學習前，我們先了解一下什么是漸變色。漸變色是指顏色從明到暗，或由深轉淺，或是從一個色彩緩慢過渡到另一個色彩，充滿變幻無窮的神秘浪漫氣息的顏色。下面這張圖就是由漸變顏色完成的圖形。

3. 填充漸變色

在 canvas 中，關于漸變的類型有兩種：線性漸變和徑向漸變。線性漸變會創(chuàng)建一個從起點到終點的漸變面，這個漸變面上的色帶是垂直于漸變線的；徑向漸變會創(chuàng)建一個自中心點向外的放射狀顏色圈。

在 canvas 中創(chuàng)建一個漸變填充我們一般分為三個步驟：

  1. 創(chuàng)建漸變線；
  2. 設定漸變線關鍵點；
  3. 應用漸變線。

接下來我們就開始學習 canvas 中漸變的實現(xiàn)。

3.1 線性漸變

我們先看一個案例，結合案例講解能更好地理解線性漸變。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.rect(10,10, 200,100)
		
		let lg = ctx.createLinearGradient(0,0, 200,0) // 1. 創(chuàng)建漸變線
		
		lg.addColorStop(0, "#f00")    // 2. 設定關鍵點
		lg.addColorStop(0.5, "#fff")  // 2. 設定關鍵點
		lg.addColorStop(1, "#000")    // 2. 設定關鍵點
		
		ctx.fillStyle = lg;           // 3. 填充應用漸變線
		
		ctx.fill();
		
	</script>
</body>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

我們將上面的例子拆分講解：

  1. 獲取canvas的渲染上下文。

    const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');

  2. 繪制一個矩形路徑，左上角坐標是 (10, 10)，長度為 200px，寬度是 100px。

    ctx.rect(10,10, 200,100)

  3. 創(chuàng)建一條漸變線，起點是 （0, 0)，終點是 (200, 0)。

    這里我們需要注意，這里的起點和終點是相對于整個畫布坐標來講的，和創(chuàng)建的路徑是沒有關聯(lián)的。如果漸變線的范圍超出了繪制的路徑，則路徑外的漸變顏色是不會顯示的，如果漸變線的范圍不足以填滿繪制的路徑，則會用兩端的顏色填滿路徑。

      let lg = ctx.createLinearGradient(0,0, 200,0)

  4. 設定漸變的關鍵點。這里我們設定了三個關鍵點，這三個點設定了在這個位置的時候應該顯示的顏色。

    這里的0，0.5，1都是指漸變線的起點到終點的比例。

     lg.addColorStop(0, "#f00")
 lg.addColorStop(0.5, "#fff")
 lg.addColorStop(1, "#000")

  5. 將創(chuàng)建的漸變樣式賦值給填充屬性。

    ctx.fillStyle = lg

  6. 填充路徑。

    ctx.fill()

到這里我們就給創(chuàng)建的路徑填充了一個漸變色。

用漸變色描邊和填充操作一樣，也是按上面講的三個步驟操作，我們看一個案例。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.rect(10,10, 200,100)
		
		let lg = ctx.createLinearGradient(0,0, 200,0) // 1. 創(chuàng)建線性漸變線
		
		lg.addColorStop(0, "#f00")    // 2. 設定關鍵點
		lg.addColorStop(0.5, "#fff")  // 2. 設定關鍵點
		lg.addColorStop(1, "#000")    // 2. 設定關鍵點
		
		ctx.strokeStyle = lg;           // 3. 填充線性漸變
		
		ctx.stroke();
		
	</script>
</body>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

我們可以看到描邊的樣式也是變成了漸變色。

3.2 徑向漸變

我們先看一個案例，結合案例講解能更好地理解徑向漸變。

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕課網(wǎng)Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標簽</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		ctx.rect(0, 0, 150, 150)
		
		let rg = ctx.createRadialGradient(75,75,0,75,75,70) // 1. 創(chuàng)建徑向漸變線
		
		rg.addColorStop(0, "#f00")    // 2. 設定關鍵點
		rg.addColorStop(0.5, "#fff")  // 2. 設定關鍵點
		rg.addColorStop(1, "#000")    // 2. 設定關鍵點
		
		ctx.fillStyle = rg;           // 3. 填充徑向漸變
		
		ctx.fill();
		
	</script>
</body>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

我們將上面的例子拆分講解：

  1. 獲取canvas的渲染上下文。

    const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');

  2. 繪制一個正方形路徑，正方形的中心點坐標是 (75, 75)。

    ctx.rect(0, 0, 150, 150)

  3. 創(chuàng)建一條徑向漸變線，起始圓心是 (75, 75)，起始半徑 r=0，結束圓心和起始圓心重合，也是 (75, 75)，結束半徑是70。

    let rg = ctx.createRadialGradient(75,75,0,75,75,70)

  4. 設定漸變的關鍵點，這里我們設定了三個關鍵點。

     lg.addColorStop(0, "#f00")
 lg.addColorStop(0.5, "#fff")
 lg.addColorStop(1, "#000")

  5. 將創(chuàng)建的漸變樣式賦值給填充屬性。

    ctx.fillStyle = rg

  6. 填充路徑。

    ctx.fill()

到這里我們就給創(chuàng)建的路徑填充了一個徑向漸變色，使用徑向漸變色描邊我們類比線性漸變的寫法，這里不再做說明。

4. 方法整理

本小節(jié)中我們使用到三個新的方法 createLinearGradient()， createRadialGradient()和漸變對象 CanvasGradient 的方法 addColorStop()。

4.1 createLinearGradient()方法

createLinearGradient() 方法創(chuàng)建一個沿參數(shù)坐標指定的直線的漸變，該方法返回一個線性 CanvasGradient 對象。

語法：

ctx.createLinearGradient(startX, startY, endX, endY);

變量說明：

變量名 類型 是否必須 說明
startX Number 是 起點的 x 軸坐標。
startY Number 是 起點的 y 軸坐標。
endX Number 是 終點的 x 軸坐標。
endY Number 是 終點的 y 軸坐標。

返回值：

CanvasGradient

一個根據(jù)指定線路初始化的線性漸變對象。

4.2 createRadialGradient()方法

createRadialGradient() 方法會依照參數(shù)確定兩個圓的坐標，繪制放射性漸變，該方法返回 CanvasGradient 對象。

語法：

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

變量說明：

變量名 類型 是否必須 說明
x0 Number 是 開始圓形的 x 軸坐標。
y0 Number 是 開始圓形的 y 軸坐標。
r0 Number 是 開始圓形的半徑。
x1 Number 是 結束圓形的 x 軸坐標。
y1 Number 是 結束圓形的 y 軸坐標。
r1 Number 是 結束圓形的半徑。

返回值：

CanvasGradient

一個根據(jù)指定線路初始化的徑向漸變對象。

4.3 addColorStop()方法

addColorStop() 方法給漸變添加一個由偏移值和顏色值指定的斷點。如果偏移值不在0到1之間，將拋出錯誤，如果顏色值不能被解析為有效的 CSS 顏色值 color，也將拋出錯誤。

語法：

void gradient.addColorStop(offset, color);

變量說明：

變量名 類型 是否必須 說明
offset Number 是 偏移值，0到1之間的值，超出范圍將拋出錯誤。
color string 是 顏色值。

5. 總結

本小節(jié)我們主要學習了如何利用漸變圖形對路徑填充或者描邊。漸變的內(nèi)容相對比較難理解，希望同學們能多多學習，特別是徑向漸變中的兩個圓的關系，這兩個圓的位置關系、大小關系不同，都會得到不同的圖形。