fillText, strokeText で globalAlpha が効かない
uupaa-excanvas.js についてです。
VMLでレンダリング時に globalAlpha に 1 以外を設定し、fillText, strokeText を行うと、文字が透過表示されません。Silverlight ではこの問題は発生しません。
検証コード
<html><head><title>VML</title></head><body> <style>v\: * { behavior: url(#default#VML);display:inline-block }</style> <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /> <!-- opacity="0.5" を指定しているのに、テキストが透過しない --> <div style="position:relative;top:0;left:0"> <v:shape style="z-index:0;position:absolute;width:50px;height:50px;left:0px;top:0px;" opacity="0.5" filled="t" stroked="f" coordSize="11000,11000" o:spt="136" fillColor="blue" strokeColor="red"> <v:textpath string="hoge" /> </v:shape> </div> <!-- filter: alpha で透過させようとした場合は透過するがジャギーがでる --> <div style="position:relative;top:0;left:200px"> <v:shape style="z-index:0;position:absolute;width:50px;height:50px;left:0px;top:0px;filter:alpha(opacity=50)" filled="t" stroked="f" coordSize="11000,11000" o:spt="136" fillColor="blue" strokeColor="red"> <v:textpath string="hoge" /> </v:shape> </div> <div style="position:relative;top:100px;left:200px"> <v:shape style="z-index:0;position:absolute;width:50px;height:50px;left:0px;top:0px;filter:alpha(opacity=50)" filled="f" stroked="t" coordSize="11000,11000" o:spt="136" fillColor="blue" strokeColor="red"> <v:textpath string="hoge" /> </v:shape> </div> </body></html>
- v:textpath + v:shape の場合に opacity の値が無視されています。【左上】
- filter:alpha() でむりやり透過させようとすると、ジャギーが発生します。【右上, 右下】