canvas基于语法（一）

1.什么是Canvas

canvas 是 HTML5 提供的一个用于展示绘图效果的标签.
canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果.
最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览
器中实现.

2.canvas 的使用领域

canvas 的使用领域很多:

1. 游戏
2. 可视化数据(重点)
3. banner 广告
4. 多媒体
   5.未来
   • 模拟仿真
   • 远程操作
   • 图形编辑

3.canvas基础用法

//创建canvas标签

var canvas = document.createElement( 'canvas' );
设置宽高
    canvas.width = 500;
    canvas.height = 400;
设置边框
    canvas.style.border = '1px dashed red';
添加到页面中
    document.body.appendChild( canvas );

获取渲染画板

// 获得 CanvasRenderingContext2D 对象
    var context = canvas.getContext( '2d' );

3.1画线

  context.moveTo( 0, 0 );
    // 绘制直线
    context.lineTo( 500, 400 );
    // 设置 起点
    context.moveTo( 0, 400 );
    // 绘制直线
    context.lineTo( 500, 0 );
    // 描边显示效果
    context.stroke();
    //填充效果
    context.fill();

4.非零环绕原则

如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点.
从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心.
看穿过拉出的直线的线段. 如果是顺时针方向就记为 +1, 如果是 逆时针方向,
就记为 -1. 最终看求和的结果. 如果是 0 就不填充. 如果是 非零 就填充.

图解：

1.png

5.闭合路劲与新路径

closePath()

beginPath() 

6.画虚线

ctx.setLineDash( 数组 )
ctx.getLineDash()
ctx.lineDashOffset = 值
--------------------------------
   ctx.moveTo( 100, 90 );
    ctx.lineTo( 100, 110 );
    ctx.moveTo( 300, 90 );
    ctx.lineTo( 300, 110 );

    ctx.moveTo( 100, 140 );
    ctx.lineTo( 100, 160 );
    ctx.moveTo( 300, 140 );
    ctx.lineTo( 300, 160 );

    ctx.moveTo( 100, 190 );
    ctx.lineTo( 100, 210 );
    ctx.moveTo( 300, 190 );
    ctx.lineTo( 300, 210 );
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.setLineDash( [ 5, 5 ] );
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineDashOffset = -2;
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

图解：

5.png

7.lineJoin，lineCap 和lineWidth；

 ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( 100, 250 );
    ctx.lineTo( 300, 250 );
    ctx.stroke();
           

图解：

2.png

    -----------------------------
描述:
        'butt' 表示两端使用方形结束.
        'round' 表示两端使用圆角结束.
        'square' 表示突出的圆角结束.
     ctx.lineWidth = 10;
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap =  'round';
    ctx.moveTo( 100, 130 );
    ctx.lineTo( 300, 130 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineCap =  'square';
    ctx.moveTo( 100, 160 );
    ctx.lineTo( 300, 160 );
    ctx.stroke();

图解：

3.png

    -------------------------------
描述:
        'round' 使用圆角连接.
        'bevel' 使用平切连接.
        'miter' 使用直角转.
     ctx.lineWidth = 10;
    ctx.lineJoin = 'round';
    ctx.moveTo( 100, 100 );
    ctx.lineTo( 200, 200 );
    ctx.lineTo( 300, 100 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'bevel';
    ctx.moveTo( 100, 150 );
    ctx.lineTo( 200, 250 );
    ctx.lineTo( 300, 150 );
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo( 100, 200 );
    ctx.lineTo( 200, 300 );
    ctx.lineTo( 300, 200 );
    ctx.stroke();

图解：

5.png