使用canvas画直线箭头

HTML

<canvas class="CanvasArrow" width="66" height="50"></canvas>

JS

function createCanvas(obj) { // 使用Canvas 批量绘画的同一形状的图像的方法
            var CN= obj.canvasNodes;
            var CNL= CN.length;
            var c=document.getElementsByClassName(obj.className);
            for(var i = c.length; i--;){
                var context=c[i].getContext("2d");
                context.lineWidth = 1;
                context.beginPath();
                context.moveTo(CN[0].x,CN[0].y);
                for(var j = 1; j < CNL; j++){
                    context.lineTo(CN[j].x,CN[j].y);
                }
                context.closePath();
                context.fillStyle = obj.fillStyle;
                context.strokeStyle = 'strokeStyle' in obj ? obj['strokeStyle'] :'transparent';
                context.fill();
                context.stroke();
            } 
}

var canvasNodes = [{x:20,y:15},{x:36,y:15},{x:36,y:10},{x:46,y:20},{x:36,y:30},{x:36,y:25},{x:20,y:25}];
var arrowobj = {
    canvasNodes: canvasNodes, // 绘画的路线
    className: 'CanvasArrow',  //需要绘画的canvas的class的名称
    fillStyle: 'rgba(30, 110, 179, 0.5)', // 背景颜色
}
createCanvas(arrowobj);

圆角箭头

const createCanvas = (Dom, bgColor) => {
  let ctx = Dom.getContext("2d");
  Dom.width = 80;
  Dom.height = 160;
  ctx.beginPath();
  ctx.lineTo(40,0);
  ctx.arcTo(50,0,50,10,10);
  ctx.lineTo(50,110);
  ctx.lineTo(80,110);
  ctx.lineTo(40,160);
  ctx.lineTo(0,110);
  ctx.lineTo(30,110);
  ctx.lineTo(30,20);
  ctx.arcTo(30,0,40,0,10);
  ctx.lineWidth = 1;
  ctx.fillStyle = bgColor;
  ctx.strokeStyle = bgColor;
  ctx.fill();
  ctx.stroke();
};
export default createCanvas;