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);
```
效果图：


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