這篇文章主要介紹用canvas繪製流程節點。
繪製前我們需要先準備一張節點圖片，例如：
；好了，正題開始：
在html中加入canvas標籤：
<canvas id="canvasId" width = "800" height="600" style="border:1px solid black; margin-left: 1px;"></canvas>
這裡要注意設定canvas標籤的寬度跟高度，也就是要設定畫布的寬度跟高度。
【相關課程推薦：JavaScript影片教學】
#取得畫布物件並初始化畫布參數
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座標，具體的後面文章會介紹到。
繪製的效果圖：
#本文來自 js教學 欄目，歡迎學習！
以上是canvas繪製工作流程之繪製節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
