canvas繪制工作流之繪制節(jié)點(diǎn)

這篇文章主要介紹用canvas繪制流程節(jié)點(diǎn)。

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

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

【相關(guān)課程推薦：JavaScript視頻教程】

獲取畫(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à)布的背景線*/ //設(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í)際繪制過(guò)程中可以直接獲取圖片對(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是圖片要繪制在畫(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ì)介紹到。

繪制的效果圖：

本文來(lái)自 js教程 欄目，歡迎學(xué)習(xí)！