站長資訊網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" /> <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中文網的其他相關欄目教程！！！
