【canvas】fill、stroke、clear

基本原理：先通过clear删除原有路径，通过定时器对其中一个属性进行改变，再重新绘制

canvas -- 轻量级动画（相比flash而言）
而且canvas一旦某个元素绘制完毕就无法再对该元素进行修改
但是flash通过一定的API可以
canvas一般的步骤：
<canvas id="myCanvas" width="600" height="400">浏览器版本不支持canvas,请先升级浏览器</canvas>
canvas标签内部的文字在浏览器版本不支持canvas标签的时候显示

        //  获取canvas
        var myCanvas = document.querySelector('#myCanvas')
        //  获取上下文对象
        var ctx = myCanvas.getContext('2d')

        //  beginPath() 设置开始地址
        //  moveTo 移动绘制点
        // lineTo 描述绘制路径
        // closePath() 闭合路径
        // strokeStyle -- 指明绘制颜色
        // stroke 描绘路径

fill  填充图形，默认的填充颜色是黑色
stroke 绘制图形的边框，默认绘制颜色是黑色
clearRect  删除指定的canvas的范围

fill  默认闭合路径(起初的描绘点到最后的描绘点)
   //  fill(填充)Rect(矩形)，一般是先设定颜色再绘制，或填充
        //  获取canvas
        var myCanvas = document.querySelector('#myCanvas')
        //  获取上下文对象
        var ctx = myCa