質問編集履歴
3
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
|
+
jsで透明度を持った画像を複数枚描画するとき、画像同士が重なることがあります。
|
|
3
|
-
|
|
4
|
+
このとき、何も設定せずにdrawImageで描画すると、alpha値は加算され、重なるほどにalpha値が大きくなっていってしまいます。
|
|
4
|
-
このようなalpha値が
|
|
5
|
+
今回実現したいのは、このような「alpha値が加算されていくような描画」ではなく、「alpha値の高い方のみが描画されるような描画」になります。
|
|
5
6
|
なお今回使用される画像は単色で、alpha値で濃淡が表現されています。
|
|
6
7
|
|
|
7
8
|
↓今（重なったところがより濃くなってしまう）
|
2
サンプル画像を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
jsで透明度を持った画像を大量に描画するとき、画像同士が重なることがあります。このとき、drawImageで何も設定せずに描画すると、alpha値は乗算され、重なるほどにalpha値が大きくなっていってしまいます。
|
|
4
4
|
このようなalpha値が累積されるような描画ではなく、alpha値の高い方のみが描画されるような描画を目指しています。
|
|
5
5
|
なお今回使用される画像は単色で、alpha値で濃淡が表現されています。
|
|
6
|
+
|
|
7
|
+
↓今（重なったところがより濃くなってしまう）
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
↓理想（重なっても滑らか）
|
|
11
|
+
|
|
12
|
+
|
|
6
13
|
|
|
7
14
|
### 試したこと
|
|
8
15
|
|
|
@@ -24,5 +31,6 @@
|
|
|
24
31
|
今回実現したいのは、より高い透明度を持った方のみの描画になります。
|
|
25
32
|
|
|
26
33
|
|
|
34
|
+
|
|
27
35
|
拙い文章で申し訳ありませんが
|
|
28
36
|
ご助力、よろしくお願いいたします。
|
1
サンプルコードを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,6 +6,23 @@
|
|
|
6
6
|
|
|
7
7
|
### 試したこと
|
|
8
8
|
|
|
9
|
-
[getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)でImageDataを取得して、配列を直接書き換える方法を試しました。この方法なら一応実現できましたが、描画頻度が高く、画像サイズが大きいため、処理落ちは避けられません。他の方法がなければ、これをより効率化していく方向で実装しようと思いますが、それにも限界があると思い、できればCanvasの描画機能内で実現
|
|
9
|
+
[getImageData](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)でImageDataを取得して、配列を直接書き換える方法を試しました。この方法なら一応実現できましたが、描画頻度が高く、画像サイズが大きいため、処理落ちは避けられません。他の方法がなければ、これをより効率化していく方向で実装しようと思いますが、それにも限界があると思い、できればCanvasの描画機能内で実現したいと思っています。
|
|
10
10
|
|
|
11
|
+
### サンプルコード
|
|
12
|
+
全文を載せると膨大になるため主要な箇所だけを記載します
|
|
13
|
+
```javascript
|
|
14
|
+
const canvas = document.createElement('canvas');
|
|
15
|
+
const ctx = canvas.getContext('2d', {alpha: true, willReadFrequently: true});
|
|
16
|
+
function pointerMove (event) {
|
|
17
|
+
ctx.globalAlpha = event.pressure; // 筆圧から透明度を設定
|
|
18
|
+
ctx.drawImage(img, event.clientX, event.clientY); // 画像を描画 (画像自体も透明度をもつ)
|
|
19
|
+
}
|
|
20
|
+
document.addEventListener('pointermove', pointerMove);
|
|
21
|
+
```
|
|
22
|
+
上記のような処理で画像同士が重なると下レイヤーの画像の影響を受けます。
|
|
23
|
+
その結果、筆圧で設定した透明度と下レイヤーの透明度が合計された状態で描画されることになります。
|
|
24
|
+
今回実現したいのは、より高い透明度を持った方のみの描画になります。
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
拙い文章で申し訳ありませんが
|
|
11
28
|
ご助力、よろしくお願いいたします。
|