使用canvas画带箭头的圆环
程序员文章站
2022-05-22 12:37:27
...
算是一个笔记,省的自己总忘:
function draw(el,x,y,r,lineColor,lineWidth,alpha,h1,h2) {
var canvas = document.getElementById(el);
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
ctx.arc(x, y, r, -Math.PI/2, -Math.PI/2+alpha, false);
ctx.stroke();
if(alpha<2*Math.PI) {
var x1 = x + (r - h1) * Math.sin(alpha)
var y1 = y - (r - h1) * Math.cos(alpha)
var x2 = x + (r + h1) * Math.sin(alpha)
var y2 = y - (r + h1) * Math.cos(alpha)
var x0 = (x1 + x2) / 2 + h2 * Math.sin(alpha + Math.PI/2)
var y0 = (y1 + y2) / 2 - h2 * Math.cos(alpha + Math.PI/2)
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.fillStyle = lineColor;
ctx.closePath();
ctx.fill();
}
}
函数里面的参数:
- el:这个是创建的canvas的节点对象,要求传递的是id名称;
- x,y:代表的是这个圆环的圆心的位置
- lineColor:圆环的颜色
- lineWidth:圆环的宽度
- alpha:圆环的角度
- h1,h2:这两个值是控制三角的大小的;
下面是关于里面的几个值的介绍:
上一篇: Matlab quiver函数用法 - 画矢量箭头图
下一篇: Java基础类库--国际化程序实现