html5-canvas01

<!-- 高宽必须在标签上设置号  -->
    <canvas width="600" height="300"></canvas>

    <script>


        // 获取canvas画布对象
        var canvas = document.querySelector("canvas");

        //获取绘图上下文
        var ctx = canvas.getContext("2d");
        //  1、先落笔
        ctx.moveTo(100, 100);

        //  2、再连线
        ctx.lineTo(300, 100);

        // 设置带颜色的横线
       
      
        //  3、最后描边
        ctx.stroke();

        
        // 开启新的图层
        ctx.beginPath();

        
        ctx.moveTo(121,200);
        ctx.lineTo(221,200);
        ctx.strokeStyle = "red";
        ctx.lineWidth="10";
        ctx.stroke();


        // 设置基础样式
        // ctx.lineWidth 设置线宽
        // ctx.lineCap 设置线帽
        // ctx.strokeStyle 设置线的颜色





    </script>