HTML5 畫布填充 · ZetCode 中文系列教程

# HTML5 畫布填充 > 原文： [https://zetcode.com/gfx/html5canvas/fills/](https://zetcode.com/gfx/html5canvas/fills/) 在 HTML5 畫布教程的這一部分中，我們將使用填充。填充用于繪制形狀的內部。共有三種基本填充：顏色，漸變和圖案。要設置形狀的內部樣式，我們使用`fillStyle`屬性。 ## 色彩代表計算機中顏色的常見系統是 RGB。顏色表示為紅色，綠色和藍色強度值的組合。 `colours.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 Canvas colour fills</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'brown'; ctx.fillRect(10, 10, 90, 60); ctx.fillStyle = 'rgb(217, 146, 54)'; ctx.fillRect(130, 10, 90, 60); ctx.fillStyle = '#3F79BA'; ctx.fillRect(250, 10, 90, 60); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="250"> </canvas> </body> </html> ``` 在示例中，我們繪制了三個彩色矩形。顏色以三種不同的格式指定。 ```js ctx.fillStyle = 'brown'; ``` 在這一行中，使用一個字符串值來設置顏色值。 ```js ctx.fillStyle = 'rgb(217, 146, 54)'; ``` 在這里，我們使用 RGB 系統。 ```js ctx.fillStyle = '#3F79BA'; ``` 第三個矩形的顏色由 RGB 系統的十六進制表示法設置。 ![Colours](https://img.kancloud.cn/38/8c/388ce8edd244f9a932e29a62a88bed4e_392x207.jpg) 圖：顏色 ## 線性漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪畫程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。有兩種類型的漸變：線性漸變和徑向漸變。第一個示例演示了 HTML5 `canvas`中的線性漸變。 `linear_gradient.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas linear gradient</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var lgr = ctx.createLinearGradient(150, 0, 150, 160); lgr.addColorStop(0.2, "black"); lgr.addColorStop(0.5, "red"); lgr.addColorStop(0.8, "black"); ctx.fillStyle = lgr; ctx.fillRect(0, 0, 300, 160); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="350"> </canvas> </body> </html> ``` 該代碼示例使用線性漸變填充矩形。線性漸變是沿直線創建的漸變。 ```js var lgr = ctx.createLinearGradient(150, 0, 150, 160); ``` `createLinearGradient()`方法沿著由參數表示的坐標給出的直線創建一個漸變。參數是起點和終點的 x 和 y 坐標。 ```js lgr.addColorStop(0.2, "black"); lgr.addColorStop(0.5, "red"); lgr.addColorStop(0.8, "black"); ``` `addColorStop()`方法使用指定的偏移量和顏色在漸變上定義新的色標。在我們的情況下，顏色停止設置，黑色和紅色開始和結束。 ```js ctx.fillStyle = lgr; ``` 創建的線性梯度設置為當前`fillStyle`。 ```js ctx.fillRect(0, 0, 300, 160); ``` 使用`fillRect()`方法繪制一個矩形。矩形的內部充滿了我們的線性漸變。 ![Linear gradient](https://img.kancloud.cn/48/41/48416e6d405eef62c8d2ba70fc3b3477_380x295.jpg) 圖：線性漸變 ## 徑向漸變徑向漸變是兩個圓之間顏色或陰影的混合。 `radial_gradient.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas radial gradient</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var rgr = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 5, canvas.width/2, canvas.height/2, 100); rgr.addColorStop(0, "black"); rgr.addColorStop(0.3, "yellow"); rgr.addColorStop(1, "black"); ctx.fillStyle = rgr; ctx.fillRect(0, 0, 250, 250); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="250" height="250"> </canvas> </body> </html> ``` 該代碼示例使用徑向漸變填充矩形。 ```js var rgr = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 5, canvas.width/2, canvas.height/2, 100); ``` `createRadialGradient()`方法創建由參數表示的兩個圓的坐標給定的徑向漸變。我們將圓圈設置在畫布的中間。前兩個參數設置起始圓的 x 和 y 坐標。第三個參數是起始圓的半徑。接下來的兩個參數是結束圓的 x 和 y 坐標。最后一個參數指定末端線圈的半徑。 ```js rgr.addColorStop(0, "black"); rgr.addColorStop(0.3, "yellow"); rgr.addColorStop(1, "black"); ``` `addColorStop()`方法設置徑向漸變中的交替顏色：黑色和黃色。 ```js ctx.fillStyle = rgr; ctx.fillRect(0, 0, 250, 250); ``` 用徑向漸變填充繪制一個矩形。 ![Radial gradient](https://img.kancloud.cn/7d/f6/7df6dc2e63e8a31faaa1bba7bbbe4a5f_302x373.jpg) 圖：徑向漸變 ## 圖案圖案是應用于形狀的圖像。也稱為圖像紋理。 `pattern.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas pattern</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'crack.png'; img.onload = function() { var pattern = ctx.createPattern(img, 'repeat'); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.fill(); }; } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="250" height="250"> </canvas> </body> </html> ``` 該示例使用重復的圖像紋理填充整個畫布。 ```js var img = new Image(); ``` `Image()`是 HTML 圖像元素的 HTML5 構造器。 ```js img.src = 'crack.png'; ``` 在`src`屬性中，設置圖像的 URL。 ```js var pattern = ctx.createPattern(img, 'repeat'); ``` `createPattern()`方法使用指定的圖像創建圖案。它按照重復參數指定的方向重復源。 `'repeat'`值在兩個方向上重復該圖案。 ![Pattern](https://img.kancloud.cn/68/ee/68ee0a52cb0e72fb39a60eec1cb05329_302x367.jpg) 圖：圖案在 HTML5 畫布教程的這一部分中，我們進行了各種填充。