html - HTML ページの値に応じてスマイリー アニメーションを挿入できますか?

Question

値に依存するスマイル アニメーションを HTML ページに挿入する方法はありますか? Naive Bayes 分類器から -1 と 1 の間の値がいくつかあります。これは、それぞれ否定的な感情と肯定的な感情に対応しています。この感情をスマイリー フェイスで視覚化することは可能ですか。つまり、値が -1 に近い場合、顔は悲しくなります :( または、値が 1 に近い場合、顔は幸せになります :) ..?

ありがとうございました。

Answer 1

サーバー側の作業をしたくないと仮定すると、これをクライアント側で行うために私が考えることができる唯一のオプションは、HTML5 canvasを使用することです。それが何であるかわからない場合は、まずそれについて少し読んで、JavaScript を使用してオブジェクトを描画する方法を確認する必要があります。

最初のステップは、顔文字の静的な部分 (つまり、顔と目の境界線など) を描くことです。キャンバスに画像のように配置します。その方法の例:

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'images/face.png';
img.onload = function() {
    ctx.drawImage(img, 0, 0); //draws img where its left-upper corner is at 0, 0
};

次に、スマイル カーブを描画するには、ベジエ曲線を使用する必要があります。値に応じてコントロールポイントを適切に移動するだけです。キャンバスにベジエ曲線を描く方法に関するチュートリアルは次のとおりです:リンク

それが何らかの形で役立つことを願っています!