canvas與工做流的不解之緣

    html的標籤 <canvas>用於圖形的繪製，經過腳本 (一般是JavaScript)來完成，canvas簡而言之就是個畫布。上一篇文章咱們提到工做流的一個重要組成部分：流程建模，也就是流程圖；

啥也不說，咱先看個效果：

  上面這個就是用canvas繪製的流程圖，流程圖裏的節點連線都是自由拖拽上去的。

  那麼canvas是怎麼繪製流程圖的，首先canvas只是html的標籤，那咱們要實現流程節點的拖拽與繪製那確定是要藉助其餘開發語言的，一般我們使用JavaScript來完成繪製。那咱們具體應該怎麼作呢：

1. 定義canvas畫布

   <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

2. 獲取畫布實例

      var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d");

         3.使用畫布實例方法繪製

   Canvas具體方法可參考https://www.runoob.com/html/html5-canvas.html

   我這裏是將節點都以圖片的形式繪製，簡單點來講就是先作好節點的圖片，好比這樣的，爲何使用這種方式呢，由於作出來的好看點啊。而後使用畫布方法ctx.drawImage(img,10,10);繪製節點圖片。繪製圖片的時候須要制定圖片的繪製大小以及座標，canvas就是個二維網格帶座標位置的；這樣咱們就能將節點放置到咱們指定的位置了；

    通過以上三個步驟，我們就初步的將節點繪製出來了，算是朝着成功又邁進了一個豬蹄子 哈哈哈，固然，要實現真正流程圖繪製，這還只是個開始；不過也彆氣餒，一步一步作到才更有成就感不是。

    這裏可能有些同窗可能要問了，爲啥使用canvas來繪製流程圖呢，爲何不用其餘的；若是你問出這個疑問，那說明你的小腦瓜是活動的，哈哈，開個玩笑啦；之前最先的時候用過flash繪製過流程圖，可是後來由於瀏覽器對flash的支持問題，最後人在屋檐下不得不低頭啊；以後又看過SVG，這個也是蠻強大的，svg與canvas各有千秋，最終我的偏好吧決定使用canvas來繪製流程圖。

   好吧，這篇就先寫到這裏，寫太長了寫的累大夥看的也累，哈哈

   歡迎大夥留言評論，交流才能更好的進步，是吧