canvas学习（2）---封装一个箭头

 简单封装一个箭头模型

<canvas id="canvas" width="500" height="500"></canvas>
    <script>
        //获取ID
        function getId(id) {
            return document.getElementById(id);
        }
        //获取上下文
        let canvas = getId('canvas').getContext('2d');
        //设置不同尺寸的箭头
        /*
        h1:箭头左侧高度；
        h2:箭头右侧高度；
        w1:左侧宽度；
        w2:右侧宽度；
        c:颜色:'red','#fff'
        x0,y0:初始位置(左上角起始)，默认，0,0
        */
        function setArrow(flag, h1, h2, w1, w2, color, x0 = 0, y0 = 0) {
            canvas.beginPath();
            if (flag == 1) {
                canvas.fillStyle = color;
            } else if (flag == 0) {
                canvas.strokeStyle = color;
            }
            canvas.moveTo(x0, y0);
            canvas.lineTo(x0 + w1, y0);
            canvas.lineTo(x0 + w1, y0 - (h2 - h1) / 2);
            canvas.lineTo(x0 + w1 + w2, y0 + h1 / 2);
            canvas.lineTo(x0 + w1, y0 - (h2 - h1) / 2 + h2);
            canvas.lineTo(x0 + w1, y0 + h1);
            canvas.lineTo(x0, y0 + h1);
            canvas.lineTo(x0, y0);
            if (flag == 1) {
                canvas.fill();
            } else if (flag == 0) {
                canvas.stroke();
            }
            canvas.closePath();
        }
        setArrow(1, 40, 80, 80, 40, 'rgb(0, 47, 167)', 40, 40);
    </script>

产生效果如下图：