使用Canvas畫箭頭

    canvas是HTML5的一個新添加的元素，HTML5 canvas是一個原生HTML繪圖薄，用於Javascript代碼，不使用第三方工具。

canvas部分方法列表：

 

方法	用途
getContext(contextId)	公開在 canvas 上繪圖需要的 API。惟一（當前）可用的 contextID 是 2d。
height	設置 canvas 的高度。默認值是 150 像素。
width	設置 canvas 的寬度。默認值是 300 像素。
createLinearGradient(x1,y1,x2,y2)	創建一個線性漸變。起始坐標為 x1,y1，結束坐標為 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2)	創建一個放射狀漸變。圓圈的起始坐標是 x1,y1，半徑為 r1。圓圈的結束坐標為 x2,y2，半徑為 r2。
addColorStop(offset, color)	向一個漸變添加一個顏色停止。顏色停止（color stop） 是漸變中顏色更改發生的位置。offset 必須介於 0 到 1 之間。
fillStyle	設置用於填充一個區域的顏色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle	設置用於繪制一根直線的顏色 — 例如，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h)	填充一個定位於 x 和 y，寬度和高度分別為 w 和 h 的矩形。
strokeRect(x,y,w,h)	繪制一個定位於 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。
moveTo(x,y)	將繪圖位置移動到坐標 x,y。
lineTo(x,y)	從繪圖方法結束的最后位置到 x,y 繪制一條直線。

 

下面為實現的canvas箭頭源碼：

 

//polygonVertex存儲模式：
//polygonVertex[0,1]=beginPoint;
//polygonVertex[2,3]=polygonVertex[triangle]右邊坐標點
//polygonVertex[4,5]=三角形右邊坐標
//polygonVertex[6,7]=三角形頂點坐標   stopPoint
//polygonVertex[8,9]=三角形左邊坐標
//polygonVertex[10,11]=polygonVertex[triangle]左邊坐標點

$(document).ready(function() {
   var beginPoint = {},
       stopPoint = {},
   polygonVertex = [],
   CONST = {
       edgeLen: 50,
       angle: 25
   };
   //封裝的作圖對象
   var Plot = {

       angle: "",

       //在CONST中定義的edgeLen以及angle參數
       //短距離畫箭頭的時候會出現箭頭頭部過大，修改：
       dynArrowSize: function() {
           var x = stopPoint.x - beginPoint.x,
               y = stopPoint.y - beginPoint.y,
               length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
           if (length < 250) {
               CONST.edgeLen = CONST.edgeLen/2;
               CONST.angle = CONST.angle/2;
           }
           else if(length<500){
               CONST.edgeLen=CONST.edgeLen*length/500;
               CONST.angle=CONST.angle*length/500;
           }
           // console.log(length);
       },

       //getRadian 返回以起點與X軸之間的夾角角度值
       getRadian: function(beginPoint, stopPoint) {
           Plot.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
           console.log(Plot.angle);
           paraDef(50,25);
           Plot.dynArrowSize();
       },

       ///獲得箭頭底邊兩個點
       arrowCoord: function(beginPoint, stopPoint) {
           polygonVertex[0] = beginPoint.x;
           polygonVertex[1] = beginPoint.y;
           polygonVertex[6] = stopPoint.x;
           polygonVertex[7] = stopPoint.y;
           Plot.getRadian(beginPoint, stopPoint);
           polygonVertex[8] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[9] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[4] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle - CONST.angle));
           polygonVertex[5] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle - CONST.angle));
       },

       //獲取另兩個底邊側面點
       sideCoord: function() {
           var midpoint = {};
           // midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
           // midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
           midpoint.x=(polygonVertex[4]+polygonVertex[8])/2;
           midpoint.y=(polygonVertex[5]+polygonVertex[9])/2;
           polygonVertex[2] = (polygonVertex[4] + midpoint.x) / 2;
           polygonVertex[3] = (polygonVertex[5] + midpoint.y) / 2;
           polygonVertex[10] = (polygonVertex[8] + midpoint.x) / 2;
           polygonVertex[11] = (polygonVertex[9] + midpoint.y) / 2;
       },

       //畫箭頭
       drawArrow: function() {
           var ctx;
           ctx = $(".drawArrow")[0].getContext('2d');
           ctx.fillStyle = "red";
           ctx.beginPath();
           ctx.moveTo(polygonVertex[0], polygonVertex[1]);
           ctx.lineTo(polygonVertex[2], polygonVertex[3]);
           ctx.lineTo(polygonVertex[4], polygonVertex[5]);
           ctx.lineTo(polygonVertex[6], polygonVertex[7]);
           ctx.lineTo(polygonVertex[8], polygonVertex[9]);
           ctx.lineTo(polygonVertex[10], polygonVertex[11]);
           // ctx.lineTo(polygonVertex[0], polygonVertex[1]);
           ctx.closePath();
           ctx.fill();
       }
   };

   //記錄起點beginPoint
   $(".drawArrow").mousedown(function(e) {
       beginPoint.x = e.pageX;
       beginPoint.y = e.pageY;
       // alert(beginPoint.x+"+"+beginPoint.y);
   });

   //記錄終點stopPoint，繪圖
   $(".drawArrow").mouseup(function(e) {
       stopPoint.x = e.pageX;
       stopPoint.y = e.pageY;
       // alert(stopPoint.x+"+"+stopPoint.y);
       Plot.arrowCoord(beginPoint, stopPoint);
       Plot.sideCoord();
       Plot.drawArrow();
   });

   //自定義參數
   function paraDef(edgeLen, angle) {
       CONST.edgeLen = edgeLen;
       CONST.angle = angle;
   }

   // $(".para-def").click(function() {
   //     var edgeLen,
   //         angle;
   //     edgeLen = parseInt($(".edge-len").val());
   //     angle = parseInt($(".angle").val());
   //     paraDef(edgeLen, angle);
   // });

});

 

HTML文件：

 

<html>

<head>
   <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
   <script type="text/javascript" src="drawarrow.js"></script>
   <!-- <link rel="stylesheet" type="text/css" href="canvasArrow.css"> -->
   <meta charset="utf-8" name="canvasArrow">
</head>
<style>
.drawArrow {
   
}
</style>

<body>
   <!-- <h2>Cavas箭頭測試</h2> -->
   <canvas id="arrow" class="drawArrow" width="1400" height="600">
   </canvas>
   </br>
   <label>EdgeLength
       <input type="text" class="edge-len"></input>
   </label>
   <label>Angle
       <input type="text" class="angle"></input>
   </label>
   <button class="para-def">定義參數</button>
</body>

</html>

 

 效果圖顯示：