简单封装一个箭头模型
<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>
产生效果如下图: