canvas繪製工做流之繪製節點

   上一篇咱們介紹了canvas繪製工做流的大概步驟，接下來會有系列文章細緻的介紹怎麼用canvas繪製工做流；這篇文章主要介紹用canvas繪製流程節點。

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

1. 在html中添加canvas標籤：

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

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

1. 獲取畫布對象並初始化畫布參數

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

 

繪製完效果如圖：

1. 獲取節點圖片對象

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

            我這裏爲了舉個例子直接建立圖片對象，實際繪製過程當中能夠直接獲取圖片對象，由於動態建立圖片對象是有個圖片加載的時間。

1. 繪製節點圖片

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

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

    實際應用過程當中，通常都會當去鼠標的位置當作x座標跟y座標，具體的後面文章會介紹到。

       繪製的效果圖：

   節點下面的文字後面文章會詳細講到怎麼繪製。

  天天get一點點，天天成長一點點，好了，今天就到這裏。