5

html5キャンバスパスを使用して、二重線の境界線を持つ形状を描画したいと思います。デフォルトのストローク(context.stroke())には、単一行タイプのパスがあります。元の形の中に似たような形を描いて、2本の境界線で作ったような形を作ることもできますが、ある種の一般的な解決策が必要です。何か案は?

4

1 に答える 1

9

これを行うにはいくつかの方法があります。簡単な方法の1つは、太い線を描き、その中央を「切り取り」、2つの小さなストロークを残すことです。

実行したいのは、メモリ内の一時的なキャンバス上に任意の種類のパスを描画してから、同じキャンバス上にglobalCompositeOperation設定された、より薄い厚さで同じパスを描画することです。destination-out

それはあなたが望む形をあなたに与えるでしょう、それらの間に透明性を持つ本質的に2本の線。

次に、そのキャンバスを、何でもある実際のキャンバス(複雑な背景など)に描画します。

次に例を示します。

http://jsfiddle.net/uTbsC/

于 2012-11-18T17:22:33.573 に答える