canvas学习

什么是Canvas？

MDN-Canvas
<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

    <canvas id="Canvas" width="200" height="100"></canvas>

#### ### Canvas的基本使用，通过JavaScript来绘制
```javascript
    /*获取元素*/
    var myCanvas = document.querySelector('#Canvas');
    /*获取绘图工具*/
    var context = myCanvas.getContext('2d');
    context.fillStyle = 'green';
    context.fillRect(10, 10, 100, 100);//起始位置坐标x，y， 长 ，宽