新鲜出炉的canvas~

canvas概述

canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.canvas标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

canvas的基本使用

MDN文档
canvas只有两个标签属性,width和height;如果不写这两个属性的话,默认宽高为300px*150px

<canvas>当前浏览器版本不支持,请升级浏览器</canvas>

注意:canvas的宽高不要用css样式设置,如果使用css样式设置,画布会失真,会变形

兼容替换

由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素canvas在这些浏览器上你应该总是能展示替代内容。支持canvas的浏览器会只渲染canvas标签，而忽略其中的替代内容。不支持 canvas 的浏览器则 会直接渲染替代内容。

绘制图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

绘制矩形

• fillRect:表示在页面中绘制矩形,共有四个属性,前两个分别表示x和y的坐标,后两个则表示宽度和高度。
  

• fillStyle：设置矩形的背景色

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
     var ctx = canvas.getContext("2d");
    //  设置颜色
    ctx.fillStyle = 'green';
    //  设置矩形前,应该先设置颜色
    ctx.fillRect(100,100,200,50);
    console.log(ctx);

绘制矩形边框

• strokeStyle:设置矩形边框颜色
• strokeRect表示在页面中绘制矩形边框,共有四个属性,前两个分别表示x和y的坐标,后两个则表示宽度和高度。

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
     var ctx = canvas.getContext("2d");
     //  设置颜色
     ctx.strokeStyle = 'green';
     //  设置矩形边框
     ctx.strokeRect(100,100,50,50);
     console.log(ctx);

绘制路径

绘制路径作用是为了设置一个不规则的多边形状态,路径是闭合的,使用了警进行绘制的时候需要既定的步骤。

1. 设置路径的起点
2. 使用绘制命令画出路径
3. 封闭路径
4. 填充或者绘制已经封闭路径的形状

    var canvas = document.querySelector('canvas');
    // 得到画布上下文,上下文有两个,2d的上下文和3d的上下文
    var ctx = canvas.getContext("2d");
    // 创建路径
    ctx.beginPath()
    // 移动绘制点
    ctx.moveTo(100,100)
    // 描述行进路径
    ctx.lineTo(300,100)
    ctx.lineTo(130,200)
    ctx.lineTo(200,50)
    ctx.lineTo(270,200)
    ctx.lineTo(100,100)
    // 封闭路径
    ctx.closePath();
    // 绘制图形
    ctx.strokeStyle = 'red';
    ctx.stroke(); 
    // 填充
    ctx.