实例
定义用蓝色填充的矩形：
javascript:
var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#0000ff"; ctx.fillrect(20,20,150,100);
浏览器支持
internet explorer 9、firefox、opera、chrome 以及 safari 支持 fillstyle 属性。
注释：internet explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
fillstyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
默认值： #000000
javascript 语法： context.fillstyle=color|gradient|pattern;
属性值
值 描述
color 指示绘图填充色的 css 颜色值。默认值是 #000000
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象
更多实例
实例 1
定义从上到下的渐变，作为矩形的填充样式：
javascript:
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);
实例 2
定义从左到右的渐变，作为矩形的填充样式：
javascript:
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(1,"white"); ctx.fillstyle=my_gradient; ctx.fillrect(20,20,150,100);
以上就是html设置或返回用于填充绘画的颜色渐变或模式的属性fillstyle的详细内容。