canvas笔记

B站老陈打码--canvas相关课程听课笔记

绘制圆

 	<canvas
      id="cl3"
      width="200px"
      height="200px"
      style="color: red,border:1px solid"
    ></canvas>
    
    var cl3 = document.getElementById("cl3");
    var cxt3 = cl3.getContext("2d");
    //脸
    cxt3.beginPath();//路径的开始
    //（圆心X，圆心Y，半径，开始的角度，结束的角度，逆时针还是顺时针）
    cxt3.arc(100, 100, 50, 0, Math.PI * 2, true);
    cxt3.stroke();
    cxt3.closePath();   //也可以通过cxt.moveTo(x,y)将笔抬到某个位置
    //嘴
    cxt3.beginPath();
    cxt3.arc(100, 100, 40, 0, Math.PI, false);
    cxt3.stroke();
    cxt3.closePath();//路径的结束
    //眼睛
    cxt3.beginPath();
    cxt3.arc(80, 80, 10, 0, Math.PI * 2, false);
    cxt3.stroke();
    cxt3.closePath();
    cxt3.beginPath();
    cxt3.arc(120, 80, 10, 0, Math.PI * 2, false);
    cxt3.stroke();
    cxt3.closePath();

arcTo绘制圆弧

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    cxt2.beginPath();
    cxt2.moveTo(30, 80);
    cxt2.arcTo(30, 20, 80, 40, 40); //第二个点，第三个点以及圆弧半径
    cxt2.stroke();
    cxt2.closePath();

绘制贝塞尔二次曲线

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    cxt2.beginPath();
    cxt2.moveTo(30, 80); //起点
    cxt2.quadraticCurveTo(30, 140, 110, 140); //第二个第三个点
    cxt2.quadraticCurveTo(80, 160, 40, 180);//以上一个曲线的终点为第一个点
    cxt2.quadraticCurveTo(100, 160, 130, 140);
    cxt2.quadraticCurveTo(210, 140, 210, 80); 
    cxt2.quadraticCurveTo(210, 20, 120, 20);
    cxt2.quadraticCurveTo(30, 20, 30, 80);
    cxt2.stroke();

绘制贝塞尔三次曲线

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    cxt2.beginPath();
    cxt2.moveTo(200, 130); //起点
    cxt2.bezierCurveTo(100, 60, 1, 150, 200, 300);
    cxt2.bezierCurveTo(400, 150, 300, 60, 200, 130);
    cxt2.stroke();

封装路径（便于重复使用）

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    var chatPath = new Path2D();
    chatPath.moveTo(30, 80); //起点
    chatPath.quadraticCurveTo(30, 140, 110, 140); //第二个第三个点
    chatPath.quadraticCurveTo(80, 160, 40, 180); //以上一个曲线的终点为第一个点
    chatPath.quadraticCurveTo(100, 160, 130, 140);
    chatPath.quadraticCurveTo(210, 140, 210, 80);
    chatPath.quadraticCurveTo(210, 20, 120, 20);
    chatPath.quadraticCurveTo(30, 20, 30, 80);
    cxt2.stroke(chatPath);

    var heartPath = new Path2D();
    heartPath.moveTo(100, 80); //起点
    heartPath.bezierCurveTo(85, 60, 70, 80, 100, 120);
    heartPath.bezierCurveTo(130, 80, 115, 60, 100, 80);
    cxt2.fill(heartPath);

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    var rectPath = new Path2D("M10 20 h 40 v 70 h 40 v 80 h -50 z");
    cxt2.stroke(rectPath);
    //M起始点，h水平方向移动，v垂直方向移动

绘制线

    var cl2 = document.getElementById("cl2");
    var cxt2 = cl2.getContext("2d");
    cxt2.beginPath();
    cxt2.moveTo(30, 80);
    cxt2.lineTo(200, 10);
    cxt2.lineTo(100, 40);
    cxt2.stroke();// 如果是cxt2.fill();就会被填充成一个三角形
    cxt2.closePath();
    

绘制矩形

    <canvas
      id="cl1"
      width="400px"
      height="400px"
      style="background: #b8e8ec"
    ></canvas>
    //找到画布
    var cl1 = document.getElementById("cl1");
    //获取画笔，上下文对象
    var cxt1 = cl1.getContext("2d");
    cxt1.fillRect(200, 100, 100, 100);//位置X，位置Y，宽度，高度
    //用于清除图形
    let height = 0;
    let t1 = setInterval(() => {
      height++;
      cxt1.clearRect(0, 0, cl1.clientWidth, height);
      if (height > cl1.clientHeight) {
        clearInterval(t1);
      }
    }, 10);

//路径绘制矩形
     cxt2.strokeRect(100, 200, 100, 50);

填充颜色、描边颜色的设置

cxt2.strokeStyle = "red";//设置描边颜色
cxt2.fillStyle = "blue";//设置填充颜色

设置全局透明度

cxt2.globalAlpha=0.5