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

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

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

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

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

matobaa

2016/05/13 12:50

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

行動規範の内容に同意します

回答2件

ベストアンサー

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}