上一篇我們介紹了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一點點，每天成長一點點，好了，今天就到這里，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/125510.html
標籤：其他
上一篇：元亨光電發送卡引數寫入？