- ベストアンサー
【html5】canvasでの文字の形の透明くりぬ
html5でcanvasを使用した場合に赤い背景に文字の形に透明くり抜きを行いたいです。 ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(0, 0, 100, 100); ctx.clearRect(20, 30, 60, 40); ★ここがRectでなく文字の切り抜きにしたい。 イメージ的にはclearText()というのがあればいいのになぁ、という感じです。 パスをmoveToで文字の形にうごかして、clipしなさーい という回答はご勘弁を(^^;)
- questionokok
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
.globalCompositeOperationを使ってみてください。 <script> //前略 ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(0, 0, 100, 100); //マスキング（？）してテキスト描画 ctx.globalCompositeOperation='destination-out'; ctx.fillText('Hello world', 20, 30); ctx.globalCompositeOperation='source-over'; //マスクを戻す ctx.clearRect( 50, 50, 10, 10);//透過確認用 //後略 </script> <p style="background-color:blue;">canvasを透過して背景が見える <canvas id="mycanvas"></canvas> </p> シャギーや半透明を細かく制御したいなら、ブラウザに任せるのではなくNo.1のような方法で自分で作らないとダメだと思います。 >パスをmoveToで文字の形にうごかして、clipしなさーい ある意味そういうことになりますが。（幅1px長さ1pxのパスを１つずつ処理していると考えて）
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞パスをmoveToで文字の形にうごかして、clipしなさーい それが本来の方法であることはご理解されているようです。 inkscapeなどで画像をトレースしたり、直接SVGにするのが良いと思いますけど・・・ SVGからHTML5のcanvasにコンバートする Ink2canvas, a new SVG to HTML5 Canvas converter | Libre Graphics World ( http://libregraphicsworld.org/blog/entry/ink2canvas-a-new-svg-to-html5-canvas-converter4 ) もあります。
お礼
こんなツールがあるんですね！！ 画像をトレースする際には役立たせていただきます。
- fujillin
- ベストアンサー率61% (1594/2576)
canvasは使ったことがほとんどありませんが、単純に背景色と文字色とで構成されているものなら、描いた後でcanvasを走査して、色によって透明にするという案ではどうでしょうか？ 参考にしたサイト http://www.html5.jp/canvas/index.html （全角空白は半角に） <!DOCTYPE HTML> <html lang="ja"> <head> <title>sample</title> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); if(canvas && canvas.getContext){ var ctx = canvas.getContext("2d"); testDraw(); transparent(0, 100, 260, 120); } //矩形と文字を書いてみる function testDraw(){ ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(0, 0, 500, 300); ctx.font = "100px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillText("テストText", 20, 200); } //矩形範囲を指定：（背景色以外の色を透明にする） // // 指定色だけ透明にしてみたら、エッジの中間色が残るようだ // それなので、背景色以外は透明に→エッジが少々ジャギる // エッジを半透明にするとか滑らかにするのは適当に修正してちょ function transparent(x, y, w, h){ var imageData = ctx.getImageData(x, y, w, h); var d = imageData.data, i; for(i=0; i<d.length; i+=4) if(d[i]!=200 || d[i+1]!=0 || d[i+2]!=0) d[i+3] = 0; ctx.putImageData(imageData, x, y); } </script> </body> </html>
お礼
ご指定の方法でうまくいきました(p゜∀゜q) 今回はNo3さんの方法でやってみますが、この方法もその内役立たせていただきますm(。v_v。)m
お礼
まさにやりたい通りのことができました！！ globalCompositeOperationですかぁ～ 勉強するようにします!!o(｀・д・´)o