canvas 标签

一、canvas描述

      是html5提出用来替代flash等其他用于作动画或游戏的插件的一个新标签

二、1、canvas标签的大小必须使用属性设置

        <canvas width='' height=''></canvas> 

       2、canvas标签是新标签，并不是所有浏览器都支持，需要在canvas标签内添加提示性文本

      <canvas>您的浏览器不支持canvas</canvas>

       3、canvas可以看成一张画布，它内部的内容由JS脚本添加

       4、在脚本中，canvas标签只是一张画布，而如果要在画布上绘制，canvas需要找一个画家来绘制

            画家的生成方法：(画家的标准称呼方式为上下文对象)

var huaban = document.queryselector('canvas);

var cxt = huaban.getConText('2d');

       5、canvas特性：上屏即像素化

三、矩形绘制

      1、填充矩形：【上下文对象.fileRect(横坐标，纵坐标，矩形宽，矩形高)】

    cxt.fillStyle='skyblue';
    cxt.fillRect(50,100,50,50);

      2、描边矩形：【上下文对象.strokRect(横坐标，纵坐标，矩形宽，矩形高)】

    cxt.strokeStyle='red';
    cxt.strokeRect(150, 100, 50, 50);

      3、擦除矩形：【上下文对象.clearRect(横坐标，纵坐标，矩形宽，矩形高)】

    cxt.clearRect(0, 0, 300, 200);

四、路径绘制

      1、设置笔触（落笔点）坐标：【上下文对象.moveTo（横坐标，纵坐标）】

    cxt.moveTo(50, 100);

      2、设置笔触路径：【上下文对象.linTo（横坐标，纵坐标）】

    cxt.lineTo(50, 200);

      3、设置笔触颜色：【上下文对象.strokStyle=颜色】

    cxt.strokeStyle='red';

      4、笔触绘制：【上下文对象.stroke()】

    cxt.stroke();

      5、设置填充颜色：【上下文对象.fillStyle=颜色】

      6、封闭图形填充：【上下文对象.fill()】

    cxt.moveTo(50, 100);
    cxt.lineTo(50, 150);
    cxt.lineTo(100,150);
    cxt.lineTo(50, 100);
    cxt.fillStyle='red';
    cxt.fill();

      7、开启路径：【上下文对象.beginPath()】

      8、结束路径：【上下文对象.closePath()】