01矩形入门

 <!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制矩形  rectangle
    //语法: ct.rect(起点的x坐标,起点的y坐标,宽度,高度)
    //4-1. 设置描边的宽度和颜色
    ct.lineWidth=3;
    ct.strokeStyle="red";
    
    //4-2. 开始绘制矩形
    ct.rect(100,100,400,200);
    
    //4-3. 开始描边
    ct.stroke();
</script>

02矩形进阶

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制矩形  rectangle
    //语法: ct.rect(起点的x坐标,起点的y坐标,宽度,高度)
    //为了让绘制的结果最贴近需求,先绘制填充，再绘制描边
    //4-1. 开始绘制矩形
    ct.beginPath();
    ct.rect(100,100,400,200);
    
    
    //4-2. 设置描边的宽度和颜色
    ct.lineWidth=3;
    ct.strokeStyle="red";

    //4-3. 开始描边
    ct.stroke();
    
    //填充颜色 ct.fill()
    //4-4. 设置填充颜色
    ct.fillStyle="yellow";
    
    //4-5. 执行填充的方法
    //ct.beginPath();
    //ct.rect(103,103,400,200);
    ct.fill();
</script>

03矩形高级

<!--1. canvas标签，有宽度和高度-->
<canvas id="mycanvas" width="1000" height="600"></canvas>

<script type="text/javascript">
    //2. js中获取画布对象
    var canv=document.getElementById("mycanvas");
    
    //3. 上下文中设置绘图方式
    var ct=canv.getContext("2d");  //webgl就是3d效果
    
    //4. 绘制描边矩形 strokeRect(起点的x坐标,起点的y坐标,宽度,高度)
    //   绘制填充矩形 fillRect(起点的x坐标,起点的y坐标,宽度,高度)
    
    //4-1. 设置描边颜色和宽度
    ct.lineWidth=3;
    ct.strokeStyle="blue";
    
    //4-2. 绘制描边矩形
    ct.strokeRect(100,100,300,200);
    
    //4-3. 设置填充颜色
    ct.fillStyle="aqua";
    
    //4-4. 绘制填充矩形
    ct.fillRect(102,102,296,196)
</script>

清屏

        //语法：ct.clearRect(x, y, width, hegiht)
        //canv.width,canv.height   自动获取画布的宽高
        ct.clearRect(0,0,canv.width,canv.height);