HTML 參考手冊(cè)

HTML 標(biāo)簽大全

HTML canvas fillStyle屬性

HTML畫(huà)布的fillStyle()屬性用于設(shè)置繪圖的顏色，漸變或圖案。默認(rèn)值為＃000000。 <canvas>元素允許您使用JavaScript在網(wǎng)頁(yè)上繪制圖形。每個(gè)畫(huà)布都有兩個(gè)描述畫(huà)布高度和寬度的元素，分別是高度和寬度。

在線示例

為矩形定義紅色填充顏色：

JavaScript：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥(niǎo)教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

測(cè)試看看 ?/?

瀏覽器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 屬性。

注意：Internet Explorer 8 及之前的版本不支持canvas元素。

定義和用法

<canvas>元素允許您使用JavaScript在網(wǎng)頁(yè)上繪制圖形。每個(gè)畫(huà)布都有兩個(gè)描述畫(huà)布高度和寬度的元素，分別是高度和寬度。

默認(rèn)值：	#000000
JavaScript 語(yǔ)法：	context.fillStyle=color\|gradient\|pattern;

屬性值

值	描述
color	指示繪圖填充色的 CSS 顏色值。默認(rèn)值是 #000000。
gradient	用于填充繪圖的漸變對(duì)象（線性或放射性）。
pattern	用于填充繪圖的 pattern 對(duì)象。

在線示例

定義一個(gè)漸變（從上到下）作為矩形的填充樣式：

JavaScript：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥(niǎo)教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
</script>
<p>注意：Internet Explorer 8和更早版本不支持canvas標(biāo)記。</p>
</body>
</html>

測(cè)試看看 ?/?

在線示例

定義從左到右的漸變，作為矩形的填充樣式：

JavaScript：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥(niǎo)教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
</script>
<p>注意：Internet Explorer 8和更早版本不支持canvas標(biāo)記。</p>
</body>
</html>

測(cè)試看看 ?/?

在線示例

定義從黑色到紅色到白色的漸變作為矩形的填充樣式：

JavaScript：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥(niǎo)教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
</script>
<p>注意：Internet Explorer 8和更早版本不支持canvas標(biāo)記。</p>
</body>
</html>

測(cè)試看看 ?/?

用到的圖像：

haha

在線示例

使用圖像來(lái)填充繪圖：

JavaScript：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥(niǎo)教程 cainiaoplus.com)</title>
</head>
<body>
<p>圖片應(yīng)用:</p>
<img src="haha.gif" id="lamp">
<p>畫(huà)布:</p>
<button onclick="draw('repeat')">重復(fù)</button> 
<button onclick="draw('repeat-x')">重復(fù)-x</button> 
<button onclick="draw('repeat-y')">重復(fù)-y</button> 
<button onclick="draw('no-repeat')">不重復(fù)</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</canvas>
<script>
function draw(direction)
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height); 
    var img=document.getElementById("lamp")
    var pat=ctx.createPattern(img,direction);
    ctx.rect(0,0,220,128);
    ctx.fillStyle=pat;
    ctx.fill();
}
</script>
</body>
</html>

測(cè)試看看 ?/?

HTML canvas 參考手冊(cè)

HTML: <template> 標(biāo)簽

HTML 參考手冊(cè)

HTML 標(biāo)簽大全

HTML canvas fillStyle屬性

在線示例

瀏覽器兼容性

定義和用法

屬性值

更多示例

在線示例

在線示例

在線示例

用到的圖像：

在線示例