最适合网络开发者的网站
图。初学者课程

尿素

HTML 画布 渐变


画布 - 渐变

渐变可用于填充矩形、圆形、线条、文本等。画布上的形状不仅限于纯色。

有两种不同类型的渐变:

  • 创建线性渐变(x,y,x1,y1) - 创建线性渐变
  • 创建径向渐变(x,y,r,x1,y1,r1) - 创建径向/圆形渐变

一旦我们有了渐变对象,我们就必须添加两个或更多的颜色停止。

addColorStop() 方法指定颜色停止点及其在渐变中的位置。渐变位置可以是 0 到 1 之间的任意值。

要使用渐变,请将 fillStyle 或 strokeStyle 属性设置为渐变,然后绘制形状(矩形、文本或线条)。


使用 createLinearGradient()

例子

创建线性渐变。用渐变填充矩形:

您的浏览器不支持 HTML5 canvas 标签。

JavaScript的:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0,“红色”);
grd.addColorStop(1,“白色”);

// 用渐变填充
ctx.填充样式 = grd;
ctx.填充矩形(10, 10, 150, 80);
亲自尝试 »

使用 createRadialGradient():

例子

创建径向/圆形渐变。用渐变填充矩形:

您的浏览器不支持 HTML5 canvas 标签。

JavaScript的:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0,“红色”);
grd.addColorStop(1,“白色”);

// 用渐变填充
ctx.填充样式 = grd;
ctx.填充矩形(10, 10, 150, 80);
亲自尝试 »