Zeichnungsknoten für den Canvas-Zeichnungsworkflow

In diesem Artikel wird hauptsächlich die Verwendung von Canvas zum Zeichnen von Prozessknoten vorgestellt.

Vor dem Zeichnen müssen wir ein Knotenbild vorbereiten, zum Beispiel: ; OK, beginnen wir mit dem Thema:

Canvas-Tag hinzufügen in HTML :

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

Hier sollten Sie darauf achten, die Breite und Höhe des Canvas-Tags festzulegen, also die Breite und Höhe der Leinwand festzulegen.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Holen Sie sich das Canvas-Objekt und initialisieren Sie die Canvas-Parameter

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

Danach Zeichnen des Effekts Wie im Bild gezeigt:

Holen Sie sich das Knotenbildobjekt

 //创建新的图片对象
 var _img = new Image();
  //指定图片的URL
 _img.src="node.png";

Ich bin hier, um ein Beispiel für die direkte Erstellung des Bildobjekts im eigentlichen Zeichenprozess zu geben. Das Bildobjekt kann direkt abgerufen werden, da das dynamisch erstellte Bildobjekt vorhanden ist Es gibt eine Zeit zum Laden des Bildes.

Zeichnen Sie das Knotenbild

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

Hier ist _img das oben erhaltene Bildobjekt, _x ist die x-Koordinate des Bildes, das in die Leinwand gezeichnet werden soll, _y ist das Zu zeichnendes Bild In der _y-Koordinate im Canvas ist _imgWidth die Breite des zu zeichnenden Bildes und _imgHeight die Breite des zu zeichnenden Bildes.

Im tatsächlichen Bewerbungsprozess wird die Position der Maus im Allgemeinen als x-Koordinate und y-Koordinate betrachtet. Die Details werden im folgenden Artikel vorgestellt. Die von

gezeichneten Renderings:

Dieser Artikel stammt aus der Spalte JS-Tutorial, willkommen zum Lernen !

Das obige ist der detaillierte Inhalt vonZeichnungsknoten für den Canvas-Zeichnungsworkflow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!