canvas與工作流的不解之緣

2022-09-11 10:09:12 字數 980 閱讀 6917

啥也不說,咱先看個效果:

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

那麼canvas是怎麼繪製流程圖的,首先

canvas

只是html

的標籤,那我們要實現流程節點的拖拽與繪製那肯定是要借助其他開發語言的,通常咱們使用j**ascript來完成繪製。那我們具體應該怎麼做呢:

定義canvas畫布

獲取畫布例項

var c=document.getelementbyid("mycanvas"); 

var ctx=c.getcontext("2d");

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

canvas具體方法可參考

我這裡是將節點都以的形式繪製,簡單點來說就是先做好節點的,比如這樣的

,為什麼使用這種方式呢,因為做出來的好看點啊。

然後使用畫布方法

ctx.drawimage(img,10,10);

繪製節點。繪製的時候需要制定的繪製大小以及座標,

canvas就是個二維網格帶座標位置的;這樣我們就能將節點放置到我們指定的位置了;

經過以上三個步驟,咱們就初步的將節點繪製出來了,算是朝著成功又邁進了乙個豬蹄子

哈哈哈,當然,要實現真正流程圖繪製,這還只是個開始;不過也別氣餒,一步一步做到才更有成就感不是。

這裡可能有些同學可能要問了,為啥使用canvas來繪製流程圖呢,為什麼不用其他的;如果你問出這個疑問,那說明你的小腦瓜是活動的,哈哈,開個玩笑啦;以前最早的時候用過flash繪製過流程圖,但是後來因為瀏覽器對flash的支援問題,最後人在屋簷下不得不低頭啊;之後又看過svg,這個也是蠻強大的,svg與canvas各有千秋,最終個人偏好吧決定使用canvas來繪製流程圖。

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

不解之緣 我與Linux系統

初識linux大約是在三年前乙個風和日麗的下午。那時候急於成長為一名優秀的黑客。大概時不待我,那時候的圈子裡正風靡著一股使用backtrack的熱潮。當然大多數人對於這個系統僅限於能夠簡單的在圖形介面操作幾下,深層次的操作倒是沒有幾個。於是乎,能夠玩轉backtrack都會被圈子裡公認的稱之為大牛。...

不解之緣 我與Linux系統

初識linux大約是在三年前乙個風和日麗的下午。那時候急於成長為一名優秀的黑客。大概時不待我,那時候的圈子裡正風靡著一股使用backtrack的熱潮。當然大多數人對於這個系統僅限於能夠簡單的在圖形介面操作幾下,深層次的操作倒是沒有幾個。於是乎,能夠玩轉backtrack都會被圈子裡公認的稱之為大牛。...

我與奧賽的不解之緣

今天在朋友圈看有人回憶童年,提到小時候放學,最喜歡做的事就是上奧數班 又看到乙個帖子,說的是在海淀區小孩上學,學區房不重要,重要的還是看奧賽成績。看了這兩條都跟奧賽有關,頗有感慨。所謂奧賽,在我上學的時代是正常課堂之外的拔高班,那個時候參加也不需要花錢,都是老師選。我感覺自己是從記憶中不吸鼻涕就開始...