canvas繪製工作流程之繪製節點

這篇文章主要介紹用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中文網其他相關文章！