fillstyle屬性怎麼使用
- 不言原創
- 2019-02-14 16:55:285513瀏覽
fillstyle屬性的功能是用來填滿繪製圖形的顏色，還有實現顏色漸變及填滿影像；fillstyle屬性的使用語法是「context.fillStyle=color|gradient|pattern;」。
本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
html5中的fillstyle屬性可以用來填滿繪製圖形的顏色，還有實現顏色漸變及填滿圖像，下面的文章我們就來具體看一下fillstyle屬性的用法。
我們先來看看fillstyle屬性的基本用法
context.fillStyle=color|gradient|pattern;
color表示繪圖填色的 CSS 色彩值。預設值是黑色
gradient表示填滿繪圖的漸層物件（線性或放射性）
pattern表示填滿繪圖的模式物件
#下面我們來看特定的範例
填滿色彩
程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="pink";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>效果如下
顏色漸變
程式碼如下
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"lightgreen");
my_gradient.addColorStop(1,"yellow");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>效果如下
填充圖片
程式碼如下
<!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img src="img/mouse.png" id="lamp" / alt="fillstyle屬性怎麼使用" >
<p>Canvas:</p>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">No-repeat</button>
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
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,300,200);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>運行效果如下
這篇文章到這裡就全部結束了，更多精彩內容大家可以追蹤php中文網的其他相關專欄教學！ ！ ！
以上是fillstyle屬性怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn