我们先来看一下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>
运转结果以下
本篇文章到这里就悉数完毕了,更多精彩内容人人能够关注ki4网的其他相干栏目教程!!!
以上就是fillstyle属性怎样运用的细致内容,更多请关注ki4网别的相干文章!