上一篇我們介紹了canvas繪製工作流的大概步驟,接下來會有系列文章細緻的介紹怎麼用canvas繪製工作流;這篇文章主要介紹用canvas繪製流程節點。
繪製前我們需要先準備一張節點圖片,例如:;好了,正題開始:
- 在html中添加canvas標籤:
<canvas id="canvasId" width = "800" height="600" style="border:1px solid black; margin-left: 1px;"></canvas>
這裏要注意設置canvas標籤的寬度跟高度,也就是要設置畫布的寬度跟高度。
- 獲取畫布對象並初始化畫布參數
var _canvas= document.getElementById(“canvasId”); var _height = _canvas.height;//獲取畫布高度 var _width = _canvas.width;//獲取畫布寬度 Var ctx =_canvas.getContext('2d'); //畫個畫布大小的長方形,目的是為了有個好看的小邊框框 ctx.clearRect(0, 0, _width, _height); /*繪製畫布的背景線*/ //設置線寬 ctx.lineWidth = 0.1; //繪製縱向背景線 for(var i = 1; i < _width / 15; i++) { ctx.beginPath(); ctx.moveTo(i * 15, 0); ctx.lineTo(i * 15, _height); ctx.stroke(); } //繪製橫向背景線 for(var i = 1; i < _ height / 15; i++) { ctx.beginPath(); ctx.moveTo(0, i * 15); ctx.lineTo(_width, i * 15); ctx.stroke(); }
繪製完效果如圖:
- 獲取節點圖片對象
//創建新的圖片對象 var _img = new Image(); //指定圖片的URL _img.src="node.png";
我這裏為了舉個例子直接創建圖片對象,實際繪製過程中可以直接獲取圖片對象,因為動態創建圖片對象是有個圖片加載的時間。
- 繪製節點圖片
ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);
這裏_img是上面獲取到的圖片對象,_x是圖片要繪製在畫布中的x坐標,_y是圖片要繪製在畫布中的_y坐標,_imgWidth是要將圖片繪製的寬度,_imgHeight是要將 圖片繪製的寬度。
實際應用過程中,一般都會當去鼠標的位置當做x坐標跟y坐標,具體的後面文章會介紹到。
繪製的效果圖:
節點下面的文字後面文章會詳細講到怎麼繪製。
每天get一點點,每天成長一點點,好了,今天就到這裏。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※為什麼 USB CONNECTOR 是電子產業重要的元件?
※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!
※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光
※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!