线性渐变

基础

首先canvas和css3的渐变色都有两种：线性和径向。

- 径向渐变

canvas里面的径向渐变只支持圆形边缘形状，两个参数（起始圆的坐标与半径）和（终点圆坐标与半径）。CSS3支持两种边缘形状圆形和椭圆。 两个详细资料canvas径向渐变详解/CSS3径向渐变详解

- 线性渐变

css3的线性渐变可以从上到下，从下到上，从左到右，从右到左(0°~360°)等方向渐变，那么canvas是否可以向css3一样支持多个方向旋转呢？

canvas创建线性渐变语法：ctx.createLinearGradient(x0, y0, x1, y1),参数分别为起点(x0,y0)坐标，终点(x1,y1)坐标.

• 下面讲解如何通过这四个坐标点汇总6个常用方向的线性坐标：

1. 从左到右

ctx.createLinearGradient(0, 0, width, 0)

2. 从右到左

ctx.createLinearGradient(width, 0, 0, 0)

3. 从上到下

ctx.createLinearGradient(0, 0, heigth, 0)

4. 从下到上

ctx.createLinearGradient(height, 0, 0, 0)

5. 从左上角到右下角

ctx.createLinearGradient(0, 0, width, height)

6. 从右下角到左上角

ctx.createLinearGradient(width, height, 0, 0)

以上就是我最近做文字渐变所了解的用法。