2022-7-15课程总结

第一章：html画布

1：步骤

 1.1：创建一个画布对象 .标签：canvas

   默认情况下他在网页上显示一个白色的空白区域大小是300*150 -->
    <canvas id="canvas" width="500" height="500">
        <!-- 提示 -->
        您的版本低，不支持画布，请更新浏览器
    </canvas>

1.2获取一个画布（先创建一个画布对象）

var canvas=document.getElementById("canvas");

1.3创建一个画布上下文对象

var context=canvas.getContext("2d");

1.4告诉程序绘画路径开始

 context.beginPath();

1.5绘制图形的起始点(设置起点为0，0)

context.moveTo(0,0);

1.6绘制图形得连接点（x轴与y轴得位置）

context.lineTo(200,200);

1.7设置图形得样式（这里仅设置线条颜色为红色）

context.strokeStyle="red"

1.8描边，填充

  context.stroke();
        // 填充颜色
        context.fillStyle="green";
        // 填充
        context.fill();

1.9效果展示(仅展示了线条写法，如需画正方形只需在添加连接点即可)

2：案例

2.1三角形

<script>
        // 1/获取一个画布（先创建一个画布对象）
        var canvas=document.getElementById("canvas");
        // 2创建一个画布上下文对象
        var context=canvas.getContext("2d");
        // 3告诉程序绘画路径开始
        context.beginPath();
        // 4绘制图形的起始点
        context.moveTo(0,0);
        // 5绘制图形得连接点
        context.lineTo(0,200);
        context.lineTo(200,0);
        context.lineTo(0,0);
        // 6设置图形得样式
        context.strokeStyle="red"
        // 7描边填充
        context.stroke();
        // 填充颜色
        context.fillStyle="green";
        // 填充
        context.fill();
    </script>

 2.2圆形

语法：arc(x轴,y轴,r半径,起始角,结束角,[False = 顺时针,true = 逆时针])

  <script>
        // 1/获取一个画布（先创建一个画布对象）
        var canvas=document.getElementById("canvas");
        // 2创建一个画布上下文对象
        var context=canvas.getContext("2d");
        // 3告诉程序绘画路径开始
        context.beginPath();
        // 4绘制图形的起始点
        // context.moveTo(0,0);
        // 5绘制图形得连接点
        //arc(x轴连接点，y周连接点，半径，)               
        context.arc(200,340,100,0,2*Math.PI)
        // 6设置图形得样式
        context.strokeStyle="red"
        // 7描边,填充
        context.stroke();
        // 填充颜色
        context.fillStyle="green";
        // 填充
        context.fill();
    </script>

附要：

 半圆的绘制：math方法的PI等于圆周率Π（2Π是一个整圆），所以想要绘制半圆只需将math.PI*1即可。

context.arc(200,340,100,0,1*Math.PI)

s状图形的绘制方法：方法基本同上，但是想要绘制一个s状图形只需绘制两个方向相反的半圆并将代码默认隐藏的true 属性和false属性显示出来。一个半圆为一个整体所以每个半圆都需要告知路径且描边

重点强调：每个半圆都需要描边，切最后一个半圆需要闭合。

//
重要代码演示  
context.beginPath(); 
       context.arc(100,100,50,0,1*Math.PI,true);
       context.stroke();

       context.beginPath();
       context.arc(200,100,50,0,1*Math.PI,false);
       context.stroke();
       context.closepath();

椭圆的绘制方法：只需要在半径的后边再给上一个半径y即可

   //画椭圆
    context.ellipse(100,100,50,30,0,0,Math.PI*2);
    context.stroke();

2.3正方形

方法：方法名（x轴，y轴，宽，高）

注意事项 fillRect(),strokeRect()这两个方法自带样式，不会因为填充描边而影

  <script>
        // 1/获取一个画布（先创建一个画布对象）
        var canvas=document.getElementById("canvas");
        // 2创建一个画布上下文对象
        var context=canvas.getContext("2d");
        // 3告诉程序绘画路径开始
        context.beginPath();
        // 4绘制图形的起始点
        // context.moveTo(0,0);
        // 5绘制图形得连接点
        context.rect(100,100,50,50);
        // 6设置图形得样式
        context.strokeStyle="red"
        // 7描边,填充
        context.stroke();
        // 填充颜色
        context.fillStyle="green";
        // 填充
        context.fill();
    </script>

 二，用画布实现虚线效果

2.1循环方法

    <script>
      // 1/获取一个画布（先创建一个画布对象）
      var canvas = document.getElementById("canvas");
      // 2创建一个画布上下文对象
      var context = canvas.getContext("2d");
      // 循环获取起始点以及连接点
      for (var i = 0; i < 30; i++) {
        // 告诉程序绘画路径开始
        context.beginPath();
        context.moveTo(10 * i, 0);
        context.lineTo(10 * i + 5, 0);
        context.closePath();
        // 设置样式
        context.lineWidth = 5;
        // 描边
        context.stroke();
      }
    </script>

 效果

 2.2虚线的封装方法，不利用循环绘制虚线

    // 绘制图形得连接点
      context.setLineDash([10,10,10]);
    //   绘制图形的起始点
      context.moveTo(0, 0);
    //   绘制图形的结束点
      context.lineTo(200, 0);
    //   绘制图形的宽度
      context.lineWidth=5;