js の楽しい実装: メガネをかけた笑顔を与える-jsチュートリアル-php.cn

js の楽しい実装: メガネをかけた笑顔を与える

藏色散人

リリース： 2021-08-02 17:59:27

オリジナル

2437 人が閲覧しました

「js は 2 つの交差する四角形を描画し、その 1 つはアルファ透明度を持ちます」では、JavaScript を使用して 2 つの交差する四角形を描画し、そのうちの 1 つはアルファ透明度を持つ方法を紹介しました。 give you 楽しい実装方法をご紹介します～

タイトル通り「メガネをかけた笑顔」です！ JavaScript は全能です~

まず最初に、図の例を示します:

js の楽しい実装: メガネをかけた笑顔を与える

この図に基づいてコードを記述して、それがどのように機能するかを確認できます。どうすればそのような絵を実現できますか?方法は複数あるはずです。ローカルで試すことができます~

次に、moveto() 関数を使用して実現される方法を紹介します。

完全なコードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="draw();">
<canvas id="canvas" width="250" height="250"></canvas>
<script>
    function draw()
    {
        var canvas = document.getElementById(&#39;canvas&#39;);
        if (canvas.getContext)
        {
            var context = canvas.getContext(&#39;2d&#39;);
            context.beginPath();
            // 外圆
 context.arc(75,75,50,0,Math.PI*2,true);
            context.moveTo(110,75);
            // 嘴巴
 context.arc(75,75,35,0,Math.PI,false);
            // 左眼和右眼
 context.moveTo(55,65);
            context.arc(60,65,5,0,Math.PI*2,true);
            context.arc(90,65,5,0,Math.PI*2,true);
            context.stroke();
        }
    }
    </script>
</body>
</html>

ログイン後にコピー

完了しました。このコードを実行すると、上記と同じ効果が得られます。

したがって、このコードでは、2 つの重要なメソッド moveTo() メソッドと arc() メソッドを導入する必要があります。

moveTo() このメソッドは、線を作成せずに、キャンバス内の指定された点にパスを移動するために使用されます。その JS 構文は、「context.moveTo(x,y)」です。 );" において、パラメータ x はパスの目標位置の x 座標を表し、y はパスの目標位置の y 座標を表します。

arc()このメソッドは、円弧/曲線 (円または部分円の作成に使用) を作成するために使用され、その JS 構文は "context.arc(x,y) 、r、sAngle、eAngle、反時計回り);"、arc() で円を作成する必要がある場合は、開始角度を 0 に、終了角度を 2*Math.PI に設定してください。

パラメータ x は円の中心の x 座標です。

y は円の中心の y 座標を表します。

r は円の半径を表します。 Circle;

sAngle 開始角度をラジアンで表します。 (円弧の円の 3 時の位置は 0 度です);

eAngle はラジアン単位で測定された終了角度を表します。

反時計回りはオプションで、描画を反時計回りにするか時計回りにするかを指定します。 False = 時計回り、True = 反時計回り。

最後に、このプラットフォームの古典的なコース「JavaScript 入門_翡翠少女般若心経シリーズ」を皆さんにお勧めします。公共の福祉のために無料です～誰でも学ぶことができます～

以上がjs の楽しい実装: メガネをかけた笑顔を与えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。