communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web Tutoriel H5 Comment dessiner des polygones tels que des triangles et des rectangles avec les astuces du didacticiel HTML5 Canvas_html5

Comment dessiner des polygones tels que des triangles et des rectangles avec les astuces du didacticiel HTML5 Canvas_html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:51 PM
canvas html5 triangle 矩形

Les principales propriétés et méthodes de l'objet CanvasRenderingContext2D nécessaires pour dessiner des polygones à l'aide de HTML5 Canvas (ceux avec "()" sont des méthodes) sont les suivantes :

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y) 定义一个新的绘制路径的起点坐标
lineTo(int x, int y) 定义一个绘制路径的中间点坐标
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的，则闭合该绘制路径。

Dessine un triangle

Code JavaScriptCopier le contenu dans le presse-papiers
  4. "UTF-8">
    5. Exemple de mise en route d'un triangle de dessin sur toile HTML5
    9. "myCanvas" width=
  9. "400px" height="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.

  16. L'effet d'affichage correspondant est le suivant :
    2016314112438272.png (421×318)

    Dessiner des rectangles
    La raison pour laquelle les rectangles de dessin Canvas sont mentionnés séparément est que l'outil Pinceau Canvas-CanvasRenderingContext2D fournit une méthode dédiée pour dessiner des rectangles.

    Code XML/HTMLCopier le contenu dans le presse-papiers
    1. >
    2. <html>
    3. <tête>
    4. <méta charset="UTF- 8"> 
    5. <titre>Exemple de mise en route d'un rectangle de dessin sur toile HTML5< / titre>
    6. tête>
    7. <corps>
    10. <toile id="myCanvas" largeur="400px" hauteur="300px" style="bordure : 1px rouge uni ;">
    11. Votre navigateur ne prend pas en charge la balise canvas.
    12. toile>
    14. <script type="texte/ javascript">
    15. //Récupérer l'objet Canvas (canvas)
    16. var canvas = document.getElementById("myCanvas");
      17. //Détectez simplement si le navigateur actuel prend en charge l'objet Canvas pour éviter de provoquer des erreurs de syntaxe dans certains navigateurs qui ne prennent pas en charge html5
      18. if(canvas.getContext){
      19. //Obtenir l'objet CanvasRenderingContext2D (pinceau) correspondant
      20. var
    20. ctx = canvas.getContext("2d");  
    21. //Démarrer un nouveau chemin de dessin
    22. ctx.beginPath();
    23. //Définissez la couleur de la ligne sur bleu
      25. ctx.StrokeStyle
    25. = "bleu" //En utilisant le point de coordonnées (10,10) dans le canevas comme point de départ du dessin, dessinez un rectangle d'une largeur de 80px et d'une hauteur de 50px
    26. ctx.rect(10, 10, 80, 50);
    27. //Trace une ligne droite selon le chemin spécifié
    28. ctx.AVC();
    29. //Fermer le chemin de dessin
    30. ctx.closePath();
    31. }
      33. script> corps> html> L'effet rectangulaire correspondant s'affiche comme suit :
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Solution d'énigmes de coquille
2 Il y a quelques semaines By DDD
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Afficher plus

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?
7463
15
Tutoriel CakePHP
1376
52
Quel est le format du nom de compte de Steam
77
11
Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent
45
19
NYT Connexions Indices et réponses
18
18
Afficher plus
Related knowledge
Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles