效果图：
代码：
<!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> <canvas id="canvas" width="200" height="200" style="border:1px dotted #d3d3d3;"></canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); function Line(x1,y1,x2,y2){ this.x1=x1; this.y1=y1; this.x2=x2; this.y2=y2; } Line.prototype.drawWithArrowheads=function(ctx,type){ // 设置箭头样式 ctx.strokeStyle="black"; ctx.fillStyle="black"; ctx.lineWidth=3; // 画线 ctx.beginPath(); ctx.moveTo(this.x1,this.y1); ctx.lineTo(this.x2,this.y2); ctx.stroke(); if(type == 1){ // 画向上的箭头 var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/-180; this.drawArrowhead(ctx,this.x1,this.y1-5,startRadians); }else{ // 画向下的箭头 var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/-180; this.drawArrowhead(ctx,this.x2,this.y2+5,endRadians); } } Line.prototype.drawArrowhead=function(ctx,x,y,radians){ ctx.save(); ctx.beginPath(); ctx.translate(x,y); ctx.rotate(radians); ctx.moveTo(0,0); ctx.lineTo(5,20); ctx.lineTo(-5,20); ctx.closePath(); ctx.restore(); ctx.fill(); } // 创建一个新的箭头对象 var line=new Line(50,50,50,155); var line1=new Line(60,50,60,155); // 第二个参数为1则箭头向上，不为1则箭头向下 line.drawWithArrowheads(context,1); line1.drawWithArrowheads(context,2); </script> </body> </html>