canvas 基础理解

1.创建获取画布

    <canvas width="500" height="500"></canvas>
    <script>
        //1.获取画布
        let can = document.querySelector('canvas')
        let cxt = can.getContext('2d')    //获取canvas对象/画笔
    </script>

2.绘制一条线段 封装函数

        cxt.beginPath();    //开始路径
        cxt.moveTo(10, 100) //起点A
        cxt.lineTo(90, 100) //终点B
        cxt.strokeStyle = 'red'//设置线条颜色
        cxt.lineWidth = '10';   //线条粗细 不带单位
        cxt.stroke()//绘制/连线
        cxt.closePath();    //关闭路径


  //绘制直线段
        //x1：起点横坐标 y1：起点纵坐标
        //x2：终点横坐标，y2：终点纵坐标
        //color：线段颜色 width:线段宽度
        function line(x1, y1, x2, y2, color, width) {
            //开启路径
            cxt.beginPath()
            cxt.moveTo(x1, y1)
            cxt.lineTo(x2, y2)
            cxt.strokeStyle = color
            cxt.lineWidth = width
            cxt.stroke()
            cxt.closePath()
        }
        // line(50, 100, 300, 100, 'red', 5)
        // line(50, 150, 300, 150, 'red', 5)
        // line(50, 200, 300, 200, 'red', 5)
        // line(50, 250, 300, 250, 'red', 5)
        // line(50, 300, 300, 300, 'red', 5)

        for (let i = 0; i < 5; i++) {
            line(50, 100 + 50 * i, 250, 100 + 50 * i, 'red', '5')
            line(50 + 50 * i, 100, 50 + 50 * i, 300, 'green', '5')
        }

3. 绘制三角形 矩形

         //绘制三角形
        //法1 用直线拼接
        line(100, 50, 100, 150, 'red', 1)
        line(100, 150, 200, 150, 'red', 1)
        line(200, 150, 100, 50, 'red', 1)

        //法2 设置多个点依次连接  常用
        cxt.beginPath()
        cxt.moveTo(100, 50)
        cxt.lineTo(100, 150)
        cxt.lineTo(200, 150)
        cxt.lineWidth = '3'
        cxt.fillStyle = 'pink'//填充色
        cxt.fill()  //填充
        cxt.closePath() //先关闭路径 再来绘制
        cxt.stroke()

        //矩形
        //法1 设置多个点依次连接
        cxt.beginPath()
        cxt.moveTo(300, 50)
        cxt.lineTo(400, 50)
        cxt.lineTo(400, 150)
        cxt.lineTo(300, 150)
        cxt.lineWidth = '3'
        cxt.strokeStyle = 'red'
        cxt.fillStyle = 'yellow'//填充色
        cxt.fill()  //填充
        cxt.closePath() //先关闭路径 再来绘制
        cxt.stroke()

        //法2 用rect的方法设置矩形在绘制 rect(起点横坐标，起点纵坐标，矩形的宽度，矩形的高度)
        cxt.beginPath()
        cxt.rect(300, 50, 100, 100)//设置矩形的状态
        cxt.lineWidth = '3'
        cxt.strokeStyle = 'red'
        cxt.fillStyle = 'yellow'//填充色
        cxt.fill()  //填充
        cxt.closePath() //先关闭路径 再来绘制
        cxt.stroke()

        //法3 用strokeRect(起点横坐标，起点纵坐标，矩形的宽度，矩形的高度) 方法设置并绘制矩形
        //用fillRect(起点横坐标，起点纵坐标，矩形的宽度，矩形的高度) 填充矩形
        //用 clearRect(起点横坐标，起点纵坐标，矩形的宽度，矩形的高度)清除矩形 
        cxt.beginPath()
        cxt.lineWidth = '3'
        cxt.strokeStyle = 'red'
        cxt.fillStyle = 'yellow'//填充色
        cxt.fillRect(300, 50, 100, 100)  //填充矩形的颜色
        cxt.clearRect(350, 80, 20, 20)  //挖洞 
        cxt.closePath() //先关闭路径 再来绘制
        cxt.strokeRect(300, 50, 100, 100)

4.绘制弧线 圆型 半圆

         //绘制弧线 360度的弧线就是一个圆
        // arc(圆心的横坐标，圆心的纵坐标，半径，开始的角度，结束的角度，顺(逆)时针)
        cxt.beginPath()
        cxt.arc(250, 250, 100, 0, 2 * Math.PI, false)//圆
        cxt.strokeStyle = 'pink'    //绘制的颜色
        cxt.lineWidth = 8   //线条粗细\
        cxt.fillStyle = 'yellow'
        cxt.fill()
        cxt.stroke()
        cxt.closePath()

        //扇形 逆时针true 顺时针 false
        cxt.beginPath()
        cxt.arc(250, 250, 100, 0, Math.PI, false)//圆
        cxt.arc(250, 250, 100, 33 * Math.PI / 180, 66 * Math.PI / 180, false)//圆
        cxt.strokeStyle = 'pink'    //绘制的颜色
        cxt.lineWidth = 8   //线条粗细
        cxt.fillStyle = 'yellow'
        cxt.fill()
        cxt.stroke()
        cxt.closePath()

        //二次贝塞尔曲线
        http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
        ctx.beginPath();
        ctx.moveTo(100, 250);
        ctx.quadraticCurveTo(250, 100, 400, 250);
        ctx.stroke()
        ctx.closePath()

        //三次贝塞尔曲线
        //http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
        ctx.beginPath();
        ctx.lineWidth = 6;
        ctx.moveTo(67, 218);
        ctx.bezierCurveTo(189, 356, 206, 98, 345, 244);
        ctx.stroke();
        ctx.closePath()

5.八卦图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cas {
            /* border: 1px solid red; */
            display: block;
            margin: auto;
            animation: revolve 2s infinite;
        }

        @keyframes revolve {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);

            }
        }
    </style>

</head>

<body>
    <canvas width="600" height="600" id="cas"></canvas>
    <script>
        let c = document.querySelector('canvas')
        let ctx = c.getContext('2d')
        //封装弧线
        function Arc(x1, y1, r, startangle, endangle, deg, color) {
            ctx.beginPath()
            ctx.arc(x1, y1, r, startangle, endangle, deg)
            ctx.fillStyle = color
            ctx.fill()
            ctx.stroke()
            ctx.closePath()
        }

        //两个大半圆
        Arc(300, 300, 300, Math.PI / 2, -Math.PI / 2, false)
        Arc(300, 300, 300, -Math.PI / 2, Math.PI / 2, false, '#fff')

        //两个小半圆
        Arc(300, 150, 150, Math.PI / 2, -Math.PI / 2, true, '#000')
        Arc(300, 450, 150, Math.PI / 2, -Math.PI / 2, false, '#fff')
        //两个小圆
        Arc(300, 150, 20, 0, Math.PI * 2, false)
        Arc(300, 450, 20, 0, Math.PI * 2, false, '#000')
    </script>
</body>

</html>