canvas基础学习之文字和渐变效果实现

###### 1.绘制实心文字

```

//老规矩，获取元素

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");

//开始路径

context.beginPath();

//设置字体：样式(斜体)、大小(单位是像素，不可缺少)、字体(一定不能少)

context.font = "italic 50px serif";

//文字的颜色

context.fillStyle = "red";

//基线对齐，就是上下对齐

context.textBaseline = "middle";

//水平居中，就是左右对齐

context.textAlign = "center";

//文本设置：参数一，文本内容;参数二、参数三，位于画布的位置(x,y);

context.fillText("hello world",100,100);

```

2.绘制镂空文字

```

//设置基本样式

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");

context.beginPath();

context.font = "italic 50px serif";

context.textBaseline = "middle";

//线性渐变的开始：参数1、2(渐变的开始位置);参数3、4(渐变的结束位置)。

var gradient = context.createLinearGradient(100,100,300,180);

//参数1，颜色占整体渐变颜色的概率(只能是0~1)，数字越大，所占份额越多。

gradient.addColorStop(0,"blue");

gradient.addColorStop(0.5,"yellow");

gradient.addColorStop(0.75,"green");

gradient.addColorStop(1,"red");

//将渐变添加给文字，因为这里用的是stroke();方法，所以文字是镂空的。

context.strokeStyle = gradient;

context.strokeText("hello world",200,100);

```

3.给矩形添加线性渐变

```

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");

context.beginPath();

var gradient = context.createLinearGradient(100,100,400,400);

gradient.addColorStop(0,"blue");

gradient.addColorStop(0.5,"yellow");

gradient.addColorStop(0.75,"green");

gradient.addColorStop(1,"red");

context.fillStyle = gradient;

context.fillRect(0,0,myCanvas.width,myCanvas.height);

```

4.径向渐变

```

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext("2d");

context.beginPath();

//前三个参数为第一个圆的圆心和半径，后三个参数为第二个圆的圆心和半径

var gradient = context.createRadialGradient(150,150,50,150,150,100);

gradient.addColorStop(0,"blue");

gradient.addColorStop(0.5,"yellow");

gradient.addColorStop(0.75,"green");

gradient.addColorStop(1,"red");

context.fillStyle = gradient;

context.fill();

context.fillRect(0,0,myCanvas.width,myCanvas.height);

```

方法大致都差不多，读者可以自行尝试，这里就不详细解释了。