透過canvasをhtmlに配置すると現れる残像を消すことはできますか？

Question

表題の問題ですが、

以下の状態になってしまいます。

http://ms-lab.com/_demo/canvas/testing.html

桜の花びらなのですが、上記testing.htmlの115行目に記載してあるdrawを透過させると背景が非表示にはなるのですが、桜に残像みたいなものが残ってしまいます。

function draw(data){

    _ctx.fillStyle = "rgba(255, 255, 255, 0)";
  
  }

皆様のお知恵を拝借頂けますでしょうかm(__)m

よろしくお願い致します。

Answer 1

試してみたところ、canvasに描画された内容に上書きで描画しているのが原因みたいですね。
透過させない場合に上手くいくのは、花びらを描く前にcanvas全体を白で塗り潰しているからです。

再描画前にcanvasに描画された内容をクリアする処理を入れるといいでしょう。

具体的にはdraw()内の_ctx.beginPath()から_ctx.fill()までの代わりに、

_ctx.clearRect(0,0, canvas.width+1,canvas.height+1);

または

canvas.width = canvas.width;

を記述するといいでしょう。

※clearRect()でcanvas.width+1などとしているのは一部のAndroid端末でclearRectする際にバグがあるため。
他の端末で特にデメリットもないようなのでこの方がいいかと思います。
参考: CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して

Comments

[bokero]

すごいです！
ご教授して頂いた通りにしたら無事に直りました！
ありがとうございますm(__)m