【html5】canvasでの文字の形の透明くりぬ

解決済

質問者：questionokok
質問日時：2012/10/15 00:20
回答数：3件

html5でcanvasを使用した場合に赤い背景に文字の形に透明くり抜きを行いたいです。

ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(0, 0, 100, 100);
ctx.clearRect(20, 30, 60, 40);　　★ここがRectでなく文字の切り抜きにしたい。

イメージ的にはclearText()というのがあればいいのになぁ、という感じです。

パスをmoveToで文字の形にうごかして、clipしなさーい
という回答はご勘弁を(^^;)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： taloo
回答日時：2012/10/15 23:49

.globalCompositeOperationを使ってみてください。

- 0
- 件

通報する

この回答へのお礼

まさにやりたい通りのことができました！！
globalCompositeOperationですかぁ～
勉強するようにします!!o(｀・д・´)o

通報する

お礼日時：2012/10/16 01:23

No.2

回答者： ORUKA1951
回答日時：2012/10/15 23:43

＞パスをmoveToで文字の形にうごかして、clipしなさーい

　それが本来の方法であることはご理解されているようです。
　inkscapeなどで画像をトレースしたり、直接SVGにするのが良いと思いますけど・・・

　SVGからHTML5のcanvasにコンバートする
Ink2canvas, a new SVG to HTML5 Canvas converter | Libre Graphics World ( http://libregraphicsworld.org/blog/entry/ink2can … )
　もあります。

- 0
- 件

通報する

この回答へのお礼

こんなツールがあるんですね！！
画像をトレースする際には役立たせていただきます。

通報する

お礼日時：2012/10/16 01:21

No.1

回答者： fujillin
回答日時：2012/10/15 14:10

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>