简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Implémentation amusante de js : donnez-vous un visage souriant avec des lunettes

藏色散人
Libérer： 2021-08-02 17:59:27
original
2419 Les gens l'ont consulté

Dans "js dessine deux rectangles qui se croisent et l'un d'eux a une transparence alpha", nous vous avons présenté comment utiliser javascript pour dessiner deux rectangles qui se croisent et l'un d'eux a une transparence alpha. Aujourd'hui, nous allons continuer à vous présenter une implémentation amusante. Méthode~

Comme le titre l'indique, "Visage souriant avec des lunettes" ! JavaScript est tout-puissant~

Tout d'abord, laissez-moi vous donner un exemple d'image :

Implémentation amusante de js : donnez-vous un visage souriant avec des lunettes

Vous pouvez écrire du code basé sur cette image et voir comment vous pouvez obtenir une telle image ? Il doit y avoir plus d'une méthode, vous pouvez l'essayer localement~

Maintenant, je vais vous présenter une méthode, qui consiste à utiliser la fonction moveto() pour y parvenir. 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>
Copier après la connexion

搞定！运行该代码会出现跟上图一样的效果。

那么在这段代码中，要介绍2个重要的方法moveTo()和arc()方法。

moveTo() 方法用于把路径移动到画布中的指定点，不创建线条，其js语法是“context.moveTo(x,y);”，参数x表示路径的目标位置的 x 坐标，y表示路径的目标位置的 y 坐标。

arc()方法用于创建弧/曲线（用于创建圆或部分圆），其js语法是“context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Le code complet est le suivant :

rrreee

Terminé ! L'exécution de ce code produira le même effet que celui indiqué ci-dessus.

Donc dans ce code, deux méthodes importantes sont introduites : la méthode moveTo() et arc().

La méthode moveTo() est utilisée pour déplacer le chemin vers un point spécifié dans le canevas sans créer de ligne. Sa syntaxe js est "context.moveTo(x,y); code> », le paramètre x représente la coordonnée x de la position cible du chemin, et y représente la coordonnée y de la position cible du chemin. <p></p>La méthode <code>arc() est utilisée pour créer des arcs/courbes (utilisées pour créer des cercles ou des cercles partiels), et sa syntaxe js est "context.arc(x,y,r,sAngle ,eAngle ,counterwise);", notez que si vous devez créer un cercle via arc(), veuillez définir l'angle de départ sur 0 et l'angle de fin sur 2*Math.PI.

Le paramètre (La position à trois heures d'un arc de cercle est de 0 degré)

eAngle représente l'angle final, mesuré en radians) ;

dans le sens inverse des aiguilles d'une montre est facultatif, spécifiant si le dessin doit être dans le sens inverse des aiguilles d'une montre ou dans le sens des aiguilles d'une montre. False = dans le sens des aiguilles d'une montre, true = dans le sens inverse des aiguilles d'une montre.

Enfin, je voudrais vous recommander le cours classique sur cette plateforme "🎜Introduction rapide à JavaScript_Jade Girl Heart Sutra Series🎜", qui est gratuit pour le bien-être public ~ tout le monde est invité à apprendre ~🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript
source：php.cn
Article précédent：js dessine deux rectangles qui se croisent et l'un d'eux contient de la transparence Article suivant：Node.js est-il vraiment monothread ? Comment communiquer entre les processus ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！