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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

12582閲覧

HTML5のCanvasで透明塗りする方法…

luma

総合スコア183

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

6クリップ

投稿2016/05/08 14:09

アルファ値が0.5で塗ると、
もとの色に関係なく、その場所の色を絶対的に指定する、といったことがしたいです。
通常だと、元の色にかぶせたように塗られます。
少なくとも、アルファ値が減ることはないと思います。

JavaにはdrawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
といったようなやり方があるようですが、HTML5のCanvasにはないんでしょうか。

clearRectというメソッドは存在しますが、draw系の命令で実現できないかと…

EaselJSというライブラリを使っているのですが、createjs.Graphicsでも実装する方法があれば、よろしければお願いします。
createjs.GraphicsにclearRectがないのが発端ではありますが…

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

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

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

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

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

matobaa

2016/05/13 12:50

やりたいことがちょっとよくわからないので、絵を描いてもらえないでしょうか。こうしたい。でも、こうなった。のようにギャップがわかるとよいです。
guest

回答2

0

ベストアンサー

context.globalCompositeOperation を指定して、2回塗りつぶすと期待通りの結果になりそうです。

JavaScript

1function draw_boxes() { 2 // 下層の図形 3 context.fillStyle = "rgb(0, 0, 255)"; 4 context.fillRect(10,10,50,50); 5 // 重なり部分をクリアする設定 6 context.globalCompositeOperation = "destination-out"; 7 context.fillStyle = "rgba(255, 0, 0, 1)"; 8 context.fillRect(25,25,50,50); 9 // 半透明色での塗りつぶし 10 context.globalCompositeOperation = "source-over"; 11 context.fillStyle = "rgba(255, 0, 0, .5)"; 12 context.fillRect(25,25,50,50); 13}

(参考)globalCompositeOperationプロパティ

ご参考になれば。

投稿2016/06/03 04:18

編集2016/06/03 04:21
tkanda

総合スコア2425

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

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

0

【アニメーションが気持ちいい!コピペで実装できる最新HTML/CSSスニペットまとめ - PhotoshopVIP】
http://photoshopvip.net/90427

上記サイトの「Cursor Traits」が透明塗りを行っているように見えます。(コードも書かれています)

投稿2016/06/02 05:59

kei344

総合スコア69366

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問