Maison interface Web Tutoriel H5 Toile HTML5 - dessiner des rectangles et des triangles simples, exemple de compétences du didacticiel code_html5

Toile HTML5 - dessiner des rectangles et des triangles simples, exemple de compétences du didacticiel code_html5

May 16, 2016 pm 03:49 PM
canvas triangle 矩形

Tout d’abord, placez un élément canevas dans la page HTML, où l’élément canevas doit avoir trois attributs : ID, largeur et hauteur.

Copier le code
Le code est le suivant :



Récupérez l'objet canevas et obtenez le contexte var cxt=document.getElementById('demo').getContext( "2d"); Le paramètre 2d est déterminé.

Commencez à dessiner. Il existe deux formes, l'une est un remplissage et l'autre est un trait.

Code javascript :

Copier le code
Le code est le suivant :




Rendu :
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.

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)

Quelle est l'aire d'un cercle à l'intérieur d'un rectangle inscrit dans un demi-cercle ? Quelle est l'aire d'un cercle à l'intérieur d'un rectangle inscrit dans un demi-cercle ? Sep 13, 2023 am 08:45 AM

Un cercle inscrit dans un rectangle est tangent au côté le plus long du rectangle, c'est-à-dire que sa longueur est tangente au cercle. Un rectangle inscrit dans un demi-cercle touche deux points sur l'arc du demi-cercle. La largeur du rectangle est égale au diamètre du cercle. Si R est le rayon du demi-cercle. La longueur du rectangle = √2R/2 La largeur du rectangle = R/√2 Le rayon du cercle inscrit est r = b/2 = R/2√2 En utilisant cette formule on peut calculer le rectangle inscrit dans le demi-cercle L'aire d'un cercle, aire = (π*r2)=π*R/8 Exemple de démonstration #include<stdio.h>intmain(){&

Programme Java pour calculer l'aire d'un triangle à l'aide de déterminants Programme Java pour calculer l'aire d'un triangle à l'aide de déterminants Aug 31, 2023 am 10:17 AM

Introduction Le programme Java pour calculer l'aire d'un triangle à l'aide d'un déterminant est un programme concis et efficace qui peut calculer l'aire d'un triangle à partir des coordonnées de trois sommets. Ce programme est utile à toute personne qui apprend ou travaille avec la géométrie, car il montre comment utiliser les calculs arithmétiques et algébriques de base en Java, ainsi que comment utiliser la classe Scanner pour lire les entrées de l'utilisateur. Le programme demande à l'utilisateur les coordonnées de trois points du triangle, qui sont ensuite lues et utilisées pour calculer le déterminant de la matrice de coordonnées. Utilisez la valeur absolue du déterminant pour vous assurer que l'aire est toujours positive, puis utilisez une formule pour calculer l'aire du triangle et l'afficher à l'utilisateur. Le programme peut être facilement modifié pour accepter des entrées dans différents formats ou pour effectuer des calculs supplémentaires, ce qui en fait un outil polyvalent pour les calculs géométriques. rangs de déterminants

Que sont les plug-ins de flèches de canevas ? Que sont les plug-ins de flèches de canevas ? Aug 21, 2023 pm 02:14 PM

Les plug-ins de flèches du canevas incluent : 1. Fabric.js, qui possède une API simple et facile à utiliser et peut créer des effets de flèche personnalisés ; 2. Konva.js, qui fournit la fonction de dessiner des flèches et peut créer diverses flèches ; styles ; 3. Pixi.js, qui fournit des fonctions de traitement graphique riches et peut obtenir divers effets de flèche ; 4. Two.js, qui peut facilement créer et contrôler des styles de flèches et des animations 5. Arrow.js, qui peut créer divers effets de flèche ; ; 6. Rough .js, vous pouvez créer des flèches dessinées à la main, etc.

Comment fusionner un graphique après la dispersion des rectangles CAO Comment fusionner un graphique après la dispersion des rectangles CAO Feb 28, 2024 pm 12:10 PM

Lorsque nous utilisons un logiciel de CAO, nous rencontrons souvent des situations dans lesquelles nous devons recombiner des objets rectangulaires « dispersés » en un seul graphique. Ce besoin se fait sentir dans de nombreux domaines, comme l’aménagement de l’espace, la conception mécanique et les dessins architecturaux. Afin de répondre à cette demande, nous devons comprendre et maîtriser certaines fonctions clés des logiciels de CAO. Ensuite, l'éditeur de ce site vous présentera en détail comment réaliser cette tâche dans l'environnement CAO. Les utilisateurs qui ont des doutes peuvent venir suivre cet article pour apprendre. Méthode pour fusionner des rectangles CAO en un seul graphique après les avoir divisés : 1. Ouvrez le logiciel CAD2023, créez un rectangle, puis entrez la commande X et un espace. Comme indiqué ci-dessous : 2. Sélectionnez l'objet rectangulaire et espacez-le. Vous pouvez briser les objets. 3. Sélectionnez toutes les lignes ouvertes

Quels sont les détails de l'horloge en toile ? Quels sont les détails de l'horloge en toile ? Aug 21, 2023 pm 05:07 PM

Les détails de l'horloge sur toile incluent l'apparence de l'horloge, les graduations, l'horloge numérique, les aiguilles des heures, des minutes et des secondes, le point central, les effets d'animation, d'autres styles, etc. Introduction détaillée : 1. Apparence de l'horloge, vous pouvez utiliser Canvas pour dessiner un cadran circulaire comme apparence de l'horloge, et vous pouvez définir la taille, la couleur, la bordure et d'autres styles du cadran 2. Lignes d'échelle, tracez des lignes d'échelle dessus ; le cadran pour représenter les heures ou les minutes. Position ; 3. Horloge numérique, vous pouvez dessiner une horloge numérique sur le cadran pour indiquer l'heure et les minutes actuelles ; 4. Aiguille des heures, aiguille des minutes, aiguille des secondes, etc.

Quelles versions de html2canvas existe-t-il ? Quelles versions de html2canvas existe-t-il ? Aug 22, 2023 pm 05:58 PM

Les versions de html2canvas incluent html2canvas v0.x, html2canvas v1.x, etc. Introduction détaillée : 1. html2canvas v0.x, qui est une première version de html2canvas. La dernière version stable est la v0.5.0-alpha1. Il s'agit d'une version mature qui a été largement utilisée et vérifiée dans de nombreux projets ; 2. html2canvas v1.x, il s'agit d'une nouvelle version de html2canvas.

Apprenez le cadre de canevas et expliquez en détail le cadre de canevas couramment utilisé Apprenez le cadre de canevas et expliquez en détail le cadre de canevas couramment utilisé Jan 17, 2024 am 11:03 AM

Explorez le framework Canvas : Pour comprendre quels sont les frameworks Canvas couramment utilisés, des exemples de code spécifiques sont nécessaires. Introduction : Canvas est une API de dessin fournie en HTML5, grâce à laquelle nous pouvons obtenir des graphiques et des effets d'animation riches. Afin d'améliorer l'efficacité et la commodité du dessin, de nombreux développeurs ont développé différents frameworks Canvas. Cet article présentera certains frameworks Canvas couramment utilisés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment utiliser ces frameworks. 1.Cadre EaselJSEa

Écrire un programme Java pour calculer l'aire et le périmètre d'un rectangle en utilisant le concept de classes Écrire un programme Java pour calculer l'aire et le périmètre d'un rectangle en utilisant le concept de classes Sep 03, 2023 am 11:37 AM

Le langage Java est aujourd’hui l’un des langages de programmation orientés objet les plus utilisés dans le monde. Le concept de classes est l’une des caractéristiques les plus importantes des langages orientés objet. Une classe est comme un modèle pour un objet. Par exemple, lorsque nous voulons construire une maison, nous créons d’abord un plan de la maison, en d’autres termes, nous créons un plan qui montre comment nous allons construire la maison. Selon ce plan, nous pouvons construire de nombreuses maisons. De même, en utilisant des classes, nous pouvons créer de nombreux objets. Les classes sont des plans pour créer de nombreux objets, où les objets sont des entités du monde réel telles que des voitures, des vélos, des stylos, etc. Une classe possède les caractéristiques de tous les objets, et les objets ont les valeurs de ces caractéristiques. Dans cet article, nous allons écrire un programme Java pour trouver le périmètre et les faces d'un rectangle en utilisant le concept de classes

See all articles