ホームページ > ウェブフロントエンド > htmlチュートリアル > html5 を使用して落書き効果を実現しますか? _html/css_WEB-ITnose

html5 を使用して落書き効果を実現しますか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:15:49
オリジナル
1377 人が閲覧しました

[img=C:UsersrootDesktop ビデオ再生][/img]

このエフェクトを実行したヒーローはいますか? アイデアを教えてください。助けを求めてください。緊急です。オンラインでお待ちください。 !


ディスカッションへの返信(解決策)

ライティングタブレットのようなものですか? ? ?その場合は、Canvas を使用してそれを行うことができます

そうですね、上のレイヤー上でマウスをスライドすると 2 番目の画像が表示されるのと同じです

そうですね、それは 2 つの画像があるのと同じです

2 つの写真は同じです。上のレイヤーのどこにマウスを移動しても、2 番目の写真が表示されます。他にどのようなアイデアがあるでしょうか。

以下の URL を参照してください。上の図は役に立ちます
http://hi.baidu.com/xxfaxy/item/884a1cbeed0fc8ea4ec7fd13

2 階の回答からの引用:

そうですね、そうです。 2 枚に相当します。上のレイヤーのどこにマウスを移動しても、2 番目の画像が表示されます。他にどのようなアイデアがあるでしょうか。

私が話しているのは、それを行うというアイデアです。 。

Canvas で実装されていると仮定して
まず、消しゴムの [サイズ、形状] がどのようなものかを確認する必要があります

つまり、長方形として見た場合、そのピクセル点の座標が消去領域になります


次に、最初の絵を Canvas1 に描画します。 隠された Canvas2 が 2 番目の絵を描画します
Canvas1 で消しゴムを引くと、Canvas2 の消しゴムに対応する消しゴム領域のすべてのピクセル座標が Canvas1 に描画されます

を参照してください。 URL に従うと、上の図が役に立ちます。 役立ちます
http://hi.baidu.com/xxfaxy/item/884a1cbeed0fc8ea4ec7fd13www.seo7ye.com

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート