如何使用canvas繪制工作流的節點

這篇文章主要介紹了如何使用canvas繪制工作流的節點，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

  繪制前我們需要先準備一張節點圖片，例如：；好了，正題開始：

1. 在html中添加canvas標簽：

<canvas id="canvasId" width = "800" height="600" style="border:1px solid black;  margin-left: 1px;"></canvas>

這里要注意設置canvas標簽的寬度跟高度，也就是要設置畫布的寬度跟高度。

2. 獲取畫布對象并初始化畫布參數

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();
}

繪制完效果如圖：

3. 獲取節點圖片對象

 //創建新的圖片對象
 var _img = new Image();
  //指定圖片的URL
 _img.src="node.png";

我這里為了舉個例子直接創建圖片對象，實際繪制過程中可以直接獲取圖片對象，因為動態創建圖片對象是有個圖片加載的時間。

4. 繪制節點圖片

ctx.drawImage(_img,_x,_y,_imgWidth, _imgHeight);

這里_img是上面獲取到的圖片對象,_x是圖片要繪制在畫布中的x坐標，_y是圖片要繪制在畫布中的_y坐標，_imgWidth是要將圖片繪制的寬度，_imgHeight是要將圖片繪制的寬度。

實際應用過程中，一般都會當去鼠標的位置當做x坐標跟y坐標，具體的后面文章會介紹到。

繪制的效果圖：

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用canvas繪制工作流的節點”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!