canvas绘制工作流之绘制节点

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