fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle

实例

定义用蓝色填充的矩形：

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 以及更早的版本不支持元素。

定义和用法

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);

fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle相关推荐

html怎么设置翻转滤镜,CSS滤镜实现的颜色渐变翻转效果
一下是利用CSS滤镜效果实现渐变翻转的代码,有需要的朋友可以参考下. 代码如下: Document .ddf{ margin: 0 auto; width:150px; height:125px; b ...
fillstyle属性_HTML canvas
HTML canvas fillStyle 属性实例定义用红色填充的矩形: Yourbrowserdoesnotsupportthecanvastag. JavaScript: var c=doc ...
canvas入门-1三种填充方式、渐变、模式
1.定义canvas的尺寸的时候最好用html的方式定义,用width和height的方式,用css会导致画布按照css设定的方式进行缩放,cavas内部是一个2d的渲染环境 2.一个canvas对应 ...
html设置返回的样式,jQuery设置或返回元素样式属性。
jQuery css() 方法css() 方法设置或返回被选元素的一个或多个样式属性. 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); ...
DBGrid 各属性的设置
在 Delphi 语言的数据库编程中,DBGrid 是显示数据的主要手段之一.但是 DBGrid 缺省的外观未免显得单调和缺乏创意.其实,我们完全可以在我们的程序中通过编程来达到美化DBGrid 外观 ...
Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度
Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度开发者除了可以为ProgressBar定义的Progress属性直接赋双精度类型的值外,还可以通过数据绑定的方式为该属性 ...
Android 颜色渐变属性动画
最近用到的一个效果,见下图文字颜色渐变 (周围的晃来晃去的框框是轨迹动画,下篇博客说) 1.原理计算机颜色由红.绿.蓝三色混合组成(值为0-255) 红.绿.蓝之间色值,按照不同大小比例组成不同颜 ...
html5视频播放怎么结束,html5设置或返回音频/视频是否应该在结束时再次播放的属性loop...
实例将视频设置为循环播放:myVid=document.getElementById("video1");myVid.loop=true; 定义和用法 loop 属性设置或返回音 ...
JQUERY设置或返回属性值attr
1.attr:设置或返回属性值 $(selector).attr(attribute) $(selector).attr(attribute,value) $(selector).attr(attri ...

fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle

fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle相关推荐

最新文章

热门文章