interface Web
Tutoriel H5
Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile
Comment dessiner un rectangle avec de la toile ? Introduction à deux méthodes pour dessiner des rectangles sur toile
L'élément
canvas utilise JavaScript pour dessiner des images sur la page Web. Le canevas est une zone rectangulaire dont vous pouvez contrôler chaque pixel. Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images. Alors, Comment dessiner un rectangle à l'aide d'une toile ? L'article suivant vous présentera la méthode de mise en œuvre pour dessiner un rectangle sur toile. Vous pouvez y jeter un oeil si vous en avez besoin.
Ce que nous devons savoir, c'est que la méthode liée aux rectangles dans le canevas est rect(). Utilisez la méthode Stroke() ou fill() pour dessiner un rectangle sur le canevas.
La méthode rect() peut recevoir 4 paramètres : la coordonnée x du rectangle, la coordonnée y du rectangle, la largeur du rectangle et la hauteur du rectangle. Les unités de ces paramètres sont les pixels.
Nous allons maintenant utiliser les méthodes Strokerect() et Fillrect() pour dessiner un rectangle.
Tout d'abord, jetons un coup d'œil à un exemple de rectangle rempli dessiné à l'aide de la méthode fillrect() dans Canvas.
Le rectangle dessiné sur le canevas par la méthode fillRect() sera rempli avec la couleur spécifiée. La couleur du remplissage est spécifiée via la propriété fillStyle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>L'effet du dessin d'un rectangle rempli sur toile est le suivant :
Jetons ensuite un coup d'œil à un exemple de rectangle non rempli dessiné à l'aide de la méthode Strokerect() dans Canvas. Le rectangle dessiné sur le canevas par la méthode
StrokeRect() sera tracé avec la couleur spécifiée. La couleur du trait est spécifiée via la propriété StrokeStyle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形：
context.strokeRect(50,50,180,120); //绘制矩形（无填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>L'effet du dessin d'un rectangle non rempli sur toile est le suivant :
Enfin, cet article se termine ici, à propos Pour plus d'informations sur Canvas, veuillez vous référer au Manuel de développement HTML5.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
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 ?
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(){&
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
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 ?
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 ?
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é
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
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
uniapp implémente comment utiliser Canvas pour dessiner des graphiques et des effets d'animation
Oct 18, 2023 am 10:42 AM
Comment utiliser Canvas pour dessiner des graphiques et des effets d'animation dans Uniapp nécessite des exemples de code spécifiques 1. Introduction Avec la popularité des appareils mobiles, de plus en plus d'applications doivent afficher divers graphiques et effets d'animation sur le terminal mobile. En tant que framework de développement multiplateforme basé sur Vue.js, uniapp offre la possibilité d'utiliser un canevas pour dessiner des graphiques et des effets d'animation. Cet article présentera comment Uniapp utilise Canvas pour obtenir des effets de graphique et d'animation, et donnera des exemples de code spécifiques. 2. toile
