html 文字如何和阴影齐平,HTML5 canvas 标签学习-------四、运用样式与颜色

createRadialGradient 的例子

这个例子，我定义了 4 个不同的径向渐变。由于可以控制渐变的起始与结束点，所以我们可以实现一些比(如在 Photoshop

中所见的)经典的径向渐变更为复杂的效果。(经典的径向渐变是只有一个中心点，简单地由中心点向外围的圆形扩张)

这里，我让起点稍微偏离终点，这样可以达到一种球状 3D

效果。但最好不要让里圆与外圆部分交叠，那样会产生什么效果就真是不得而知了。

4

个径向渐变效果的最后一个色标都是透明色。如果想要两色标直接的过渡柔和一些，只要两个颜色值一致就可以了。代码里面看不出来，是因为我用了两种不同的颜色表示方法，但其实是相同的，#019F62

= rgba(1,159,98,1)。

functiondraw() {

varctx = document.getElementByIdx_x_x_x_x('canvas').getContext('2d');

// Create gradients

varradgrad = ctx.createRadialGradient(45,45,10,52,50,30);

radgrad.addColorStop(0, '#A7D30C');

radgrad.addColorStop(0.9, '#019F62');

radgrad.addColorStop(1, 'rgba(1,159,98,0)');

varradgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);

radgrad2.addColorStop(0, '#FF5F98');

radgrad2.addColorStop(0.75, '#FF0188');

radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

varradgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);

radgrad3.addColorStop(0, '#00C9FF');

radgrad3.addColorStop(0.8, '#00B5E2');

radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

varradgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);

radgrad4.addColorStop(0, '#F4F201');

radgrad4.addColorStop(0.8, '#E4C700');

radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

// draw shapes

ctx.fillStyle = radgrad4;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad3;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad2;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad;

ctx.fillRect(0,0,150,150);

}

function draw() {

var ctx = document.getElementByIdx_x_x_x_x('canvas').getContext('2d');

// Create gradients

var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);

radgrad.addColorStop(0, '#A7D30C');

radgrad.addColorStop(0.9, '#019F62');

radgrad.addColorStop(1, 'rgba(1,159,98,0)');

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);

radgrad2.addColorStop(0, '#FF5F98');

radgrad2.addColorStop(0.75, '#FF0188');

radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);

radgrad3.addColorStop(0, '#00C9FF');

radgrad3.addColorStop(0.8, '#00B5E2');

radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);

radgrad4.addColorStop(0, '#F4F201');

radgrad4.addColorStop(0.8, '#E4C700');

radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

// draw shapes

ctx.fillStyle = radgrad4;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad3;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad2;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad;

ctx.fillRect(0,0,150,150);

}