canvas简述

1. 绘制三角形

fill是填充面（实心），stroke是画线（空心）

    <script type="text/javascript">
        //首先，找到 <canvas> 元素:
        var canvas = document.getElementById('myCanvas');
        //然后，创建 context 对象：
        //getContext("2d") 对象是内建的 HTML5 对象，
        //拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        var context = canvas.getContext('2d');
        
        //canvas 是一个二维网格。
        //canvas 的左上角坐标为 (0,0)
        context.beginPath();
        //moveTo(x,y) 定义线条开始坐标
        context.moveTo(0,0);
        //lineTo(x,y) 定义线条结束坐标
        //绘制三角形
        context.lineTo(0,100);
        context.lineTo(100,100);
        context.lineTo(0,0)
        context.strokeStyle = "#0000FF";
        context.stroke();
//      context.lineWidth = 10;
//      context.fillStyle = "#008000";
//      context.fill();

2. 画圆

lineCap:线帽 有三个参数

• butt 默认。向线条的每个末端添加平直的边缘。
• round 向线条的每个末端添加圆形线帽。
• square 向线条的每个末端添加正方形线帽。

context.arc(参数1,参数2,参数3,参数4,参数5,参数6);

• 参数1 参数2 圆形原点的坐标
• 参数3 半径
• 参数4 绘制圆形的起始角度
• 参数5 绘制圆形的结束角度
• 参数6 顺时针 | 逆时针 参数是布尔：true 逆时针，false 顺时针
  context.arc(200,100,100,0,Math.PI,false);

        //画圆 
        context.beginPath(); // 重新开启一个新的图层
        context.arc(200,100,100,0,Math.PI,false);
        context.lineCap = "round";
        context.lineWidth = 15;
        context.strokeStyle = "aquamarine";
        context.stroke();

3. 矩形

context.rect(参数1,参数2,参数3,参数4);

• 参数1 ,参数2 矩形绘制的起点位置（参数1为X轴的坐标，参数2为Y轴的坐标）
• 参数3,矩形的宽
• 参数4矩形的高

创建线条渐变 context.createLinearGradient(参数1,参数2,参数3,参数4);

• 参数1 ,参数2 渐变颜色开始的位置（参数1为X轴的坐标，参数2为Y轴的坐标）
• 参数3,参数4 渐变颜色结束的位置（参数3为X轴的坐标，参数4为Y轴的坐标）

grd.addColorStop(参数1,参数2);

• 参数1 ,0~1之间的数
• 参数3,参数4 颜色

        //矩形
        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createLinearGradient(0,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();

创建一个径向/圆渐变 context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEnd);

-xStart, yStart 开始圆的圆心的坐标。
-radiusStart 开始圆的半径。
-xEnd, yEnd 结束圆的圆心的坐标。
-radiusEnd 结束圆的半径。

        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createRadialGradient(200,200,50,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();

4. 文本

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本
• context.textBaseline 垂直对齐方式
• context.textAlign 水平对齐方式

        // bold 可以省略   Arial 不可以省略
        context.font = "bold 50px Arial";
        context.textBaseline = "middle";
        context.textAlign = "center";
        var grd = context.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"blue");
        grd.addColorStop(0.5,"yellow");
        grd.addColorStop(1,"red");
        context.fillStyle = grd; 
        context.fillText("hello",100,100);