亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

HTML 參考手冊

HTML 標簽大全

HTML canvas fillStyle屬性

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

在線示例

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

Yourbrowserdoesnotsupportthecanvastag.

JavaScript：

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

瀏覽器兼容性

IEFirefoxOperaChromeSafari

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

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

定義和用法

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

默認值：#000000
JavaScript 語法：context.fillStyle=color|gradient|pattern;

屬性值

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

更多示例

在線示例

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

Yourbrowserdoesnotsupportthecanvastag.

JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽.</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標記。</p>
</body>
</html>
測試看看 ?/?

在線示例

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

Yourbrowserdoesnotsupportthecanvastag.

JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽.</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標記。</p>
</body>
</html>
測試看看 ?/?

在線示例

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

Yourbrowserdoesnotsupportthecanvastag.

JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥教程 cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽.</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標記。</p>
</body>
</html>
測試看看 ?/?

用到的圖像：

haha

在線示例

使用圖像來填充繪圖：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas fillStyle屬性的使用(菜鳥教程 cainiaoplus.com)</title>
</head>
<body>
<p>圖片應用:</p>
<img src="haha.gif" id="lamp">
<p>畫布:</p>
<button onclick="draw('repeat')">重復</button> 
<button onclick="draw('repeat-x')">重復-x</button> 
<button onclick="draw('repeat-y')">重復-y</button> 
<button onclick="draw('no-repeat')">不重復</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</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>
測試看看 ?/?
HTML canvas 參考手冊