【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 = myCanvas.getContext('2d')

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

        ctx.beginPath()

        ctx.moveTo(50,10)

        ctx.lineTo(100,10)
        ctx.lineTo(100,60)
        ctx.lineTo(50,60)


        ctx.lineTo(50,10)
        // ctx.closePath()
        //  strokeStyle  指定描绘的颜色
        //  填充
        ctx.fillstyle = "orange"
        ctx.fill()


        //  stroke 描绘
        // ctx.strokeStyle = 'blue'
        // ctx.stroke()

stroke  默认不闭合

	//  fill(填充)Rect(矩形)，一般是先设定颜色再绘制，或填充
        //  获取canvas
        var myCanvas = document.querySelector('#myCanvas')
        //  获取上下文对象
        var ctx = myCanvas.getContext('2d')

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

        ctx.beginPath()

        ctx.moveTo(50,10)

        ctx.lineTo(100,10)
        ctx.lineTo(100,60)
        ctx.lineTo(50,60)


        // ctx.lineTo(50,10)
        // ctx.closePath()
        //  strokeStyle  指定描绘的颜色
        //  填充
        // ctx.fillstyle = "orange"
        // ctx.fill()


        //  stroke 描绘
        ctx.strokeStyle = 'blue'
        ctx.stroke()

fill

stroke