如何使用canvas繪制工作流的節(jié)點(diǎn)

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

  繪制前我們需要先準(zhǔn)備一張節(jié)點(diǎn)圖片，例如：；好了，正題開(kāi)始：

1. 在html中添加canvas標(biāo)簽：

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

這里要注意設(shè)置canvas標(biāo)簽的寬度跟高度，也就是要設(shè)置畫(huà)布的寬度跟高度。

2. 獲取畫(huà)布對(duì)象并初始化畫(huà)布參數(shù)

var _canvas= document.getElementById(“canvasId”);
var _height = _canvas.height;//獲取畫(huà)布高度
var _width = _canvas.width;//獲取畫(huà)布寬度
Var ctx =_canvas.getContext('2d');
//畫(huà)個(gè)畫(huà)布大小的長(zhǎng)方形，目的是為了有個(gè)好看的小邊框框
ctx.clearRect(0, 0, _width, _height);
/*繪制畫(huà)布的背景線(xiàn)*///設(shè)置線(xiàn)寬
ctx.lineWidth  = 0.1;
//繪制縱向背景線(xiàn)
for(var i = 1; i < _width / 15; i++) {
  ctx.beginPath();
  ctx.moveTo(i * 15, 0);
  ctx.lineTo(i * 15, _height);
  ctx.stroke();
}
//繪制橫向背景線(xiàn)
for(var i = 1; i < _ height / 15; i++) {
  ctx.beginPath();
  ctx.moveTo(0, i * 15);
  ctx.lineTo(_width, i * 15);
  ctx.stroke();
}

繪制完效果如圖：

3. 獲取節(jié)點(diǎn)圖片對(duì)象

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

我這里為了舉個(gè)例子直接創(chuàng)建圖片對(duì)象，實(shí)際繪制過(guò)程中可以直接獲取圖片對(duì)象，因?yàn)閯?dòng)態(tài)創(chuàng)建圖片對(duì)象是有個(gè)圖片加載的時(shí)間。

4. 繪制節(jié)點(diǎn)圖片

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

這里_img是上面獲取到的圖片對(duì)象,_x是圖片要繪制在畫(huà)布中的x坐標(biāo)，_y是圖片要繪制在畫(huà)布中的_y坐標(biāo)，_imgWidth是要將圖片繪制的寬度，_imgHeight是要將圖片繪制的寬度。

實(shí)際應(yīng)用過(guò)程中，一般都會(huì)當(dāng)去鼠標(biāo)的位置當(dāng)做x坐標(biāo)跟y坐標(biāo)，具體的后面文章會(huì)介紹到。

繪制的效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用canvas繪制工作流的節(jié)點(diǎn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!