实例
定义用蓝色填充的矩形:
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 以及更早的版本不支持 5ba626b379994d53f7acf72a64f9b697 元素。
定义和用法
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的详细内容。更多信息请关注PHP中文网其他相关文章!