[B! canvas][*WEB制作] highAAAのブックマーク

highAAA id:highAAA

canvasと*WEB制作に関するhighAAAのブックマーク (2)

[図解] HTML5 Canvasあれこれ - レイヤー, マスク(ImageData), 全画面でのハマりポイント - Qiita
を指定します。すべて0にして、margin: autoにするのがポイントです。こうしないとうまく中央に揃ってくれません。4つの角のいずれかに揃えるときはmargin: autoは要りません。 Canvasでマスクをかける Canvasで、いわゆるマスクというのをやってみます。GIMPやPhotoshopなどの画像編集ソフトには「レイヤーマスク」という機能がありますが、これは通常のレイヤー画像と、グレースケールのマスク画像を用意し、マスク画像の色にあわせて通常のレイヤー画像の透明度を操作する、というものです。言葉で説明してもわかりにくいので図でどうぞ。ｱｯｺﾚｼﾞｬﾅｲこういうことです。マスク画像が白に近いところは不透明に、黒に近いところは透明になります。これのいいところは色がそのまま透明度になるのでアンチエイリアスつきの画像をマスクにしたとき境界部分のグレーがきちんと半透明になるとこ
highAAA 2020/09/25
*Web制作

canvas
リンク
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
highAAA 2020/02/28
canvas

*WEB制作
リンク
1