ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。プログラミングinventor画像をかたどる画像を象るにあたり、ハート型写真を作るで画像を重ね書きする方法をまとめてあります。画像は一般に長方形で管理されます。時計など、丸い画像は内部的に細工が施されて円形に描画されます。長方形の風景画像をひょうたん形に描画したい時があります。象る形をある条件によって変更する場合は、元の画像を変更せずにフィルターの働きをする効果画像を変更する方法があります。この辺りの確認できた事柄をまとめます。画像に柔らかな滑らかな味付けをするために、角を丸くするborder-radius属性があります。角を滑らかにすることを面をとると言いますが、それを幅、高さの50%まで拡大すると楕円、真円に縁どることができます。2例を以下に挙げます。ソースコードはひとつにまとめました。このdivが丸くなります。class="kadomaru">このdivが丸くなります。</div>重ね書きによる画像縁取りborder-radiusによる画像縁取りはひょうたんのような複雑な形に象るには不向きです。このような場合、重ね書きによる縁取りが似合います。以下に日本3景の天橋立の画像を加工前の画像とともに円形に縁どった例を示します。天橋立を円形に縁どる図形(poly-99.png)の作り方を挙げます。Windowsに備え付けのペイントなどの図形エディタで図形メニュー-楕円形を選びます。線の幅を8pxにして楕円の縦横長さを同値にして真円を描きます。その後、中央部を透明色にして保存します。画像AにBを重ね合わせるとCの状態になります。JavaScriptのcanvasにおいて、globalCompositeOperation属性を利用するともっと高度な重ね合わせの描画をすることができます。この象り法は長方形に表示される万華鏡を円形に描画する手法に応用します。コメントをキャンセル下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。コメント名前メールアドレス上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。