76、深入探索 Canvas 绘图：从基础到高级技巧

深入探索 Canvas 绘图：从基础到高级技巧

1. 渐变效果

在 Canvas 中，渐变是一种强大的工具，可以为图形添加丰富的色彩过渡。这里介绍两种常见的渐变类型：线性渐变和径向渐变。

线性渐变可以对角穿过画布，以下是创建线性渐变的代码示例：

// A linear gradient, diagonally across the canvas (assuming no transforms)
var bgfade = c.createLinearGradient(0,0,canvas.width,canvas.height);
bgfade.addColorStop(0.0, "#88f");  // Start with light blue in upper left
bgfade.addColorStop(1.0, "#fff");  // Fade to white in lower right

径向渐变则是在两个同心圆之间创建渐变，中间透明，逐渐过渡到半透明灰色，然后再回到透明：

// A gradient between two concentric circles. Transparent in the middle
// fading to translucent gray and then back to transparent.
var peekhole = c.createRadialGradient(300,300,100, 300,300,300);
pee