Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

キャンバスfabric.jsのレイヤー

FabricJSには、オブジェクトのz-indexを変更する次のAPIメソッドがあります。

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

次を使用することもできます：

fabric.Canvas.prototype.orderObjects = function(compare) {
   this._objects.sort(compare);
   this.renderAll();
}

  1. HTML5キャンバス要素を印刷します

    以下は、HTML5キャンバス要素を表示するためのコードスニペットです。 <a href = "javascript:print_voucher()">PRINT CANVAS</a> function print_canvas() {    $("#canvas_voucher").printElement(); } ここでcanvas_voucherはcanvas要素のIDです。これを機能させるには、canvasを.png画像のURLに変換し、新しいブラウザウィンドウで開く必要があります。印刷ダイアログがトリ

  2. HTML5キャンバス変換

    HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう： <!DOCTYPE HTML> <html>    <head>       <script>          function drawShape(){             //