資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究HTML canvas fillStyle 屬性
HTML canvas 的 fillStyle() 屬性用於設定繪圖的顏色或漸變或圖案。預設值為 #000000。<canvas> 元素允許你使用 JavaScript 在網頁上繪製圖形。每個 canvas 都具有兩個分別描述畫布高度和寬度的元素，即 height 和 width。
以下是語法 −
ctx.fillStyle=color|gradient|pattern;
上面的值包括 −
- color：繪圖填充顏色，它是 CSS 顏色。
- gradient：用於填充繪圖的線性或徑向漸變物件。
- pattern：用於填充繪圖的圖案物件。
我們現在來看一個示例來實現 canvas 的 fillStyle() 屬性 −
示例
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
var newGrad =ctx.createLinearGradient(0, 0, 130, 0);
newGrad.addColorStop(0, "blue");
newGrad.addColorStop(0.8, "green");
ctx.fillStyle = newGrad;
ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html>輸出
更新日期：12-Jun-2020
437 瀏覽量
廣告