質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Q&A

0回答

1738閲覧

Canvas(create.js)のcompositeOperation

naomei

総合スコア7

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

0グッド

0クリップ

投稿2016/06/02 05:12

canvasにおける合成(compositeOperation)に関してです。

compositeOperationは2つの要素が重なる場合に適応されますが、
1つのcanvasの中に2つ以上のcompositeをさせたい場合
どのように考えればいいでしょうか。

###背景をテキストでマスクさせたい

[インスタンス]
bg:背景
txt:テキスト

javascript

1txt.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2stage.addChild(bg, txt);

2つの場合は正常に合成がされます。


しかし、切り抜きたいテキストが2つ以上の要素がある場合・・

[インスタンス]
bg:背景
txt01:テキスト01
txt02:テキスト02

javascript

1txt01.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2txt02.compositeOperation = 'destination-atop';//重なっている部分だけ残す 3stage.addChild(bg, txt, txt02);

txt01とtxt02をbgで切り抜きたいのですが、
txt02の背面はtxt01なので当然正常に動作せず・・。


そこでcreate.jsのcontainerを使用して、
そのcontainer内だけで合成を完結させようとするも・・

javascript

1txt01.compositeOperation = 'destination-atop';//重なっている部分だけ残す 2txt02.compositeOperation = 'destination-atop';//重なっている部分だけ残す 3 4var container01 = new createjs.Container(); 5container01.addChild(bg,txt01); 6 7var container02 = new createjs.Container(); 8container01.addChild(bg,txt02); 9 10stage.addChild(container01,container02);

やはり正常に動作せず、compositeOperationはcontainerを突き抜けて、
canvas全体に影響を与えてしまうようです。


そのため、現状はテキストごとにcanvasを作りわけていますが、
canvasの数が多くなりすぎ、パフォーマンスも悪くなってしまっています。

どうにか1つのcanvas内でconpositeを何種類も使い分ける方法はないでしょうか?

どうぞよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問