02 Canvas 入门

<canvas id="demo" width="600px" height="600px">
        ie9以上才支持
    </canvas>
    <script>
        //1.拿到canvas标签
        var canvas = document.getElementById(‘demo‘);

        canvas.style.border="1px solid red";

        //2.拿到canvas的上下文
        var ctx = canvas.getContext(‘2d‘);

        //3.绘制
        ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.lineTo(100,200);
        //ctx.lineTo(100,100);

        //闭合
        ctx.closePath();

       //边框样式
        ctx.lineWidth=4;
        ctx.strokeStyle="red";

       //开始描边
        ctx.stroke();

       //填充
        ctx.fillStyle="skyblue";
        ctx.fill();
    </script>