201

拡張ライブラリがない場合、同じキャンバス要素に複数のレイヤーを含めることは可能ですか？

では、一番上のレイヤーでclearRectを実行しても、一番下のレイヤーは消去されませんか？

ありがとう。

4

7 に答える 7

292

いいえ、ただし、複数の<canvas>要素を重ねて、同様のことを実行することはできます。

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

キャンバスに最初のレイヤーを描画し、layer1キャンバスに2番目のレイヤーを描画しますlayer2。次にclearRect、最上層にいると、下のキャンバスにあるものがすべて透けて見えます。

于 2010-06-09T18:48:17.540 に答える
58

これに関連して：

キャンバス上に何かがあり、その後ろに何かを描画したい場合は、context.globalCompositeOperation設定を「destination-over」に変更して、「source-over」に戻すことができます。やり直しました。

   var context = document.getElementById('cvs').getContext('2d');

    // Draw a red square
    context.fillStyle = 'red';
    context.fillRect(50,50,100,100);



    // Change the globalCompositeOperation to destination-over so that anything
    // that is drawn on to the canvas from this point on is drawn at the back
    // of what's already on the canvas
    context.globalCompositeOperation = 'destination-over';



    // Draw a big yellow rectangle
    context.fillStyle = 'yellow';
    context.fillRect(0,0,600,250);


    // Now return the globalCompositeOperation to source-over and draw a
    // blue rectangle
    context.globalCompositeOperation = 'source-over';

    // Draw a blue rectangle
    context.fillStyle = 'blue';
    context.fillRect(75,75,100,100);
<canvas id="cvs" />

于 2013-05-05T19:48:55.990 に答える
41

canvasドキュメントに追加せずに複数の要素を作成できます。これらはあなたのレイヤーになります：

drawImage次に、それらを使用して必要な処理を行い、最後に、を使用して宛先キャンバスで適切な順序でコンテンツをレンダリングしますcontext。

例：

/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);

/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);

/* virtual canvase 2 - not appended to the DOM */    
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)

/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);

そしてここにいくつかのcodepenがあります：https ：//codepen.io/anon/pen/mQWMMW

于 2015-03-01T23:03:56.483 に答える
11

私もこれと同じ問題を抱えていました。position：absoluteを使用した複数のcanvas要素が機能しますが、出力を画像に保存する場合は機能しません。

そこで、私は先に進んで、各レイヤーに独自のコードがあるかのようにコーディングするための単純なレイヤー「システム」を実行しましたが、すべてが同じ要素にレンダリングされます。

https://github.com/federicojacobi/layeredCanvas

機能を追加するつもりですが、今のところは追加できます。

レイヤーを「偽造」するために、複数の関数を実行してそれらを呼び出すことができます。

于 2015-12-22T02:08:30.207 に答える
5

また、 http：//www.concretejs.comをチェックアウトすることもできます。これは、ヒットの検出、階層化、およびその他の多くの周辺機器を可能にする、最新の軽量なHtml5キャンバスフレームワークです。あなたはこのようなことをすることができます：

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);

// reorder layers
layer1.moveUp();

// destroy a layer
layer1.destroy();
于 2016-04-01T22:52:14.810 に答える
2

ただし、レイヤー02は、レイヤー01のすべての図面をカバーします。これを使用して、両方のレイヤーの図面を表示しました。スタイルで（background-color：transparent;）を使用します。

    <div style="position: relative;"> 
      <canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
      </canvas> 
      <canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
      </canvas>
</div>

于 2019-12-29T20:02:44.217 に答える
0

Qがライブラリを使用したくないことは理解していますが、Google検索から来る他の人にこれを提供します。@EricRowellは優れたプラグインについて言及しましたが、試すことができる別のプラグインhtml2canvasもあります。

この例では、レイヤー化された透明なPNGをz-index「製品ビルダー」ウィジェットとして使用しています。Html2canvasは、画像をプッシュしたり、複雑さ、回避策、および「応答しない」キャンバス自体を使用したりすることなく、スタックを煮詰めるために見事に機能しました。バニラキャンバス+JSではこれをスムーズに/正気に行うことができませんでした。

最初z-indexに絶対divで使用して、相対位置のラッパー内に階層化されたコンテンツを生成します。次に、ラッパーをhtml2canvasにパイプ処理して、レンダリングされたキャンバスを取得します。これはそのままにするか、クライアントが保存できるように画像として出力します。

于 2016-06-20T20:52:26.293 に答える