我们在使用渐变的时候要特别了然的驾驭渐变的尺寸的概念。要是大家设置渐变从x=10扩展到x=110的偏离,那么渐变只会功效在等级次序方向上从10到110的间距的限量内。超过那么些约束的图片将任然受渐变色的熏陶,不过在这里个界定之外的水彩只会是听得多了就会说的详细的起来或甘休颜色。

使用渐变来填充和描边图形

如下边的代码所示,这里有八个圆,圆心分别为x1,y1x2,y2,它们的半径分别为r1r2,这么些值将用作参数字传送入到2D上下文的createRadialGradient()方法中。

在上头的例子中为渐变增添了二种颜色。第一种颜色是深橙,设置在潜濡默化的初阶处。第二种颜色是芥末黄,设置在潜濡默化的终结处。

渐变长度是十分关键的定义,须要大家精心回味。唯有理解它本事在应用渐变是收获不错的结果。

线性渐变

你的浏览器不支持HTML5 Canvas!

二个通往渐变于三个圆形来定义。每一个圆皆有一个圆心和一条半径。下边是率先垂范代码:

addColorStop()主意有两个参数。第叁个参数是0-1中间的贰个数值,那一个数值内定该颜色步入渐变多少长度的离开,第三个参数是颜色值,例子中选取的是rgb()颜色值。

回到HTML5 Canvas教程目录 相关阅读

varx1=0;vary1=0;varx2=100;vary2=100;varlinearGradient1=context.createLinearGradient;

那多少个圆必得安装不相同的半径,产生叁个内圆和一个外圆。那样渐变色就从贰个圆形辐射到另一个圆形。

您的浏览器不扶植HTML5 Canvas!

varx1=0;vary1=0;varx2=0;vary2=100;varlinearGradient1=context.createLinearGradient;

笔直的线性渐变仅仅是笔直方向的参数值区别,比方:

varx1=100;//第一个圆圆心的X坐标vary1=100;//第一个圆圆心的Y坐标varr1=30;//第一个圆的半径varx2=100;//第二个圆圆心的X坐标vary2=100;//第二个圆圆心的Y坐标varr2=100;//第二个圆的半径varradialGradient1=context.createRadialGradient;radialGradient1.addColorStop');radialGradient1.addColorStop');context.fillStyle=radialGradient1;context.fillRect;

水彩结束点会被增加到那多少个圆圈之间,比如地点的代码中,第三个颜色结束点中的参数0表示该颜色从第三个圆圈早先,第一个颜色结束点中的参数1意味第二种颜色从第二个圆圈带头。

createLinearGradient()函数有4个参数:x1y1x2y2。那4个参数决定渐变的主旋律和间距。线性渐变会从第三个点。

线性渐变以线性的情势来改变颜色,也便是程度,垂直或对角方向。

您的浏览器不补助HTML5 Canvas!

varlinearGradient1=context.createLinearGradient;linearGradient1.addColorStop');linearGradient1.addColorStop');context.fillStyle=linearGradient1;context.fillRect;context.fillRect;context.fillRect;context.fillRect;context.fillRect;
varlinearGradient1=context.createLinearGradient;linearGradient1.addColorStop');linearGradient1.addColorStop');

向阳渐变

切实来看上面包车型大巴代码,这里绘制了5个矩形,并用地点所说的渐变来填充它们,让大家蓝看看效果:

水彩结束点

varcanvas=document.getElementById;varcontext=canvas.getContext;varlinearGradient1=context.createLinearGradient;linearGradient1.addColorStop');linearGradient1.addColorStop(0.5,'rgb;linearGradient1.addColorStop');context.fillStyle=linearGradient1;context.fillRect;varlinearGradient2=context.createLinearGradient;linearGradient2.addColorStop');linearGradient2.addColorStop');linearGradient2.addColorStop');context.strokeStyle=linearGradient2;context.strokeRect;

正如前方所说,线性渐变以线性的格局来退换颜色。大家得以经过2D上下文的createLinearGradient()艺术来创建二个线性渐变。上边是三个例证:

水平的线性渐变仅仅是水平方向的参数值分歧,举个例子:

从地点的结果可以看看,在潜移暗化区域之外的图样仅会动用起来或终止颜色来填充。

你能够加上通过addColorStop()函数来增添更加的多的颜色。譬如上面包车型大巴例子加多了两种颜色:

MDN CreateLinearGradient

向阳渐变是一种圆形的颜料扩展格局,颜色从圆心地点上马向外辐射。上边是三个例子:

varcanvas=document.getElementById;varcontext=canvas.getContext;varx1=0;vary1=0;varx2=100;vary2=0;varlinearGradient1=context.createLinearGradient;

一个对角线的线性渐变水平和垂直方向上的参数都不相似,比如:

默转潜移的长短

通过fillStylestrokeStyle属性来指向渐变对象就可以产生渐变的填充或描边。

你的浏览器不支持HTML5 Canvas!

线性渐变

下边是上边代码的归来结果:

MDN CreateRadialGradient

径向渐变以圆形格局来改造颜色,颜色以圆形的着力向外辐射。

您的浏览器不帮衬HTML5 Canvas!

近日大家得感到图形填充渐变色或描边渐变色。上面是五个事例,贰个矩形的填充渐变色和三个矩形的描边渐变色。

潜移暗化遵照种类来分能够分成两连串型:

数据解读 ,间距的话,加入有多个水准线性渐变,x1=150HTML5 Canvas:绘制渐变色-Web前端之家。,x2=350。渐变从浅粉红过渡到枣红。那么富有水平方向一定x值稍低于150的图形都会动用玛瑙红蓝填充。全体水平方向一定x值超越350的图形都会选拔铜锈绿来填充。唯有那一个在档案的次序方向一定x值在150到350时期的图形会选拔湖蓝渐变色来填充。

您能够运用渐变来填充或描边图形。要填写或描边图形能够经过2D上下文的fillStylestrokeStyle特性来实现。上边是四个示范代码:

varx1=100;vary1=100;varr1=30;varx2=150;vary2=125;varr2=100;varradialGradient1=context.createRadialGradient;radialGradient1.addColorStop');radialGradient1.addColorStop');context.fillStyle=radialGradient1;context.fillRect;

地点的代码在耳濡目染的中间加多了一个石黄。整个渐变将平滑的从辛卯革命过渡到橄榄棕,在连片到白灰。

varlinearGradient1=context.createLinearGradient;linearGradient1.addColorStop');linearGradient1.addColorStop;linearGradient1.addColorStop');

你的浏览器不帮助HTML5 Canvas!

万一五个圆圈的圆心地点相像,那么径向渐变将是三个一体化的圆形。假使三个圆的圆心位置不相同,那么径向渐变看起来就好像叁个探照灯发出的强光。举例上边包车型大巴样子:

通往渐变

在地方的事例中,并未指明线性渐变使用什么颜色。为了指明使用什么渐变颜色,能够在默转潜移对象上行使addColorStop()艺术来内定。比方:

HTML5
Canvas渐变是一种用于填充或描边图形的颜料方式。渐变色是由差异的颜色进行过渡,实际不是十足的水彩。先来看多少个canvas渐变色的事例:

varlinearGradient1=context.createLinearGradient;linearGradient1.addColorStop');linearGradient1.addColorStop;linearGradient1.addColorStop');context.fillStyle=linearGradient1;context.strokeStyle=linearGradient1;
varx1=0;vary1=0;varx2=100;vary2=0;varlinearGradient1=context.createLinearGradient;

相关文章

网站地图xml地图