マスクマスクは、CSSマスクを使用してjavascriptで作成されました

Question

私はjavascriptでパーティクルシステムを作成しました。ユーザーがボタンの上を移動するたびに、関数が呼び出され、1つのパーティクルが作成された後、それを不可視divに割り当てます。パーティクルはdivの下部から上部に移動します。問題は、これらの粒子がdivの正方形の形で動くことです。しかし、私はこれらの粒子を多角形にマスクする必要があります。このポリゴンからすべてのパーティクルが移動して、不可視になります。私はその問題を見つけた。適切な例が見つからない。

Answer 1

私はあなたを正しく理解しているかどうかは完全にはわかりませんが、私の理解に基づいて次のスニペットを作成しました。赤い四角を動かしてみてください。それは、六角形の形で切り取る必要があります。あなたは簡単にマスクを作成することができますhere。

このコードはCSSのclip-pathプロパティに基づいています。このプロパティを使用すると、HTML要素の内容をクリッピングするマスクとして機能するパスを定義できます。 thisとthisの記事をご覧ください。

私は2 divを作っています。 1つはコンテナ（#box）で、2番目はコンテナの子（#polygon）です。 #polygonはその親の全領域を塗りつぶし、clip-pathプロパティがそれに適用されます。最後に、粒子は#polygonの内部にあります。 #polygonと#boxの両方がCSSプロパティoverflow: hiddenを設定しています。

$('#particle').draggable()

#box { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: purple; 
 
    margin: 50px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#polygon { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height:100%; 
 
    -webkit-clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
    clip-path: polygon(51% 21%, 79% 35%, 79% 70%, 53% 87%, 25% 72%, 24% 37%); 
 
} 
 

 
#particle { 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 50px; 
 
    background: red; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 

 

 
<div id="box"> 
 
    <div id="polygon"> 
 
     <div id="particle"></div> 
 
    </div> 
 
</div>