html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<canvas class="drawLineC" width="410" height="70px" style="border:dashed 2px #CCC;margin-top: 5px">您的浏览器不支持显示该图像,请升级你的浏览器</canvas>
</div>
</body>
</html>
画图
//区域宽度
var width=document.body.clientWidth*0.85;
var fromX=width/2;//中心点
var lineY=50;//直线y轴
var toX1=2*fromX-5;//向右线x终点
var toX2=5;//向左线x终点
var theta=30;//箭头倾斜角度
var headlen=20;//箭头斜线长度
var lineWidth=3;//线条宽度
var color='#f36';
//画图
var can=$('body').find(".drawLineC")[0];
var ctx=can.getContext('2d');
drawArrow(ctx,fromX,lineY,toX1,lineY,theta,headlen,lineWidth,color);
drawArrow(ctx,fromX,lineY,toX2,lineY,theta,headlen,lineWidth,color);
//画实心圆
var r=8;
drawCir(ctx,fromX,lineY,r,0,2*Math.PI,color);
drawText(ctx,fromX-40,20,'责任心',color);
//写文本
function drawText(ctx,x,y,text,color){
ctx.beginPath();
ctx.fillStyle =color;
ctx.font="20px Arial";
ctx.fillText(text,x,y);
}
//画实心圆
function drawCir(ctx,x,y,r,start,stop,color){
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineWidth=2*r;
ctx.arc(x,y,r,start,stop);//x,y,r,start,stop
ctx.stroke();
}
//画带箭头直线
function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
theta = typeof(theta) != 'undefined' ? theta : 30;
headlen = typeof(theta) != 'undefined' ? headlen : 10;
width = typeof(width) != 'undefined' ? width : 1;
color = typeof(color) != 'color' ? color : '#000';
// 计算各角度和对应的P2,P3坐标
var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
angle1 = (angle + theta) * Math.PI / 180,
angle2 = (angle - theta) * Math.PI / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
botY = headlen * Math.sin(angle2);
ctx.save();
ctx.beginPath();
var arrowX = fromX - topX,
arrowY = fromY - topY;
ctx.moveTo(arrowX, arrowY);
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
arrowX = toX + topX;
arrowY = toY + topY;
ctx.moveTo(arrowX, arrowY);
ctx.lineTo(toX, toY);
arrowX = toX + botX;
arrowY = toY + botY;
ctx.lineTo(arrowX, arrowY);
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
ctx.restore();
}
效果图