怎么用canvas繪制流程節(jié)點(diǎn)

小編給大家分享一下怎么用canvas繪制流程節(jié)點(diǎn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在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è)置畫布的寬度跟高度。

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

var _canvas= document.getElementById(“canvasId”);var _height = _canvas.height;//獲取畫布高度var _width = _canvas.width;//獲取畫布寬度Var ctx =_canvas.getContext('2d');//畫個(gè)畫布大小的長(zhǎng)方形，目的是為了有個(gè)好看的小邊框框ctx.clearRect(0, 0, _width, _height);/*繪制畫布的背景線*///設(shè)置線寬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();}

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

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

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

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

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

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

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

以上是“怎么用canvas繪制流程節(jié)點(diǎn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！