キャンバス描画ワークフロー描画ノード

この記事では主に、キャンバスを使用してプロセス ノードを描画する方法を紹介します。

描画する前に、ノード画像を準備する必要があります。例: ; さて、トピックから始めましょう:

キャンバス タグの追加in html :

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

After図のようにエフェクトを描画します:

ノードのピクチャ オブジェクトを取得します

 //创建新的图片对象
 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 チュートリアル 列からのものです。ぜひ学習してください。

以上がキャンバス描画ワークフロー描画ノードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。