Exemple de dessin de polygones de toile
Cet article présente principalement des informations pertinentes sur les exemples de dessins de polygones sur toile (diagramme en araignée). L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Comment dessiner des diagrammes en araignée :
Avant de commencer, nous devons savoir comment Canvas dessine des images. L'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de HTML5 utilise JavaScript pour dessiner des images 2D sur des pages Web. Sur le canevas de la zone rectangulaire, contrôlez chaque pixel et utilisez JavaScript pour dessiner des graphiques 2D et les restituer pixel par pixel. Il existe de nombreuses façons d'utiliser l'élément canvas pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.
*Attention ! ! ! La balise canvas elle-même n'a pas de fonctions de dessin et ne peut utiliser que JavaScript pour dessiner des images sur des pages Web.
Le rendu est le suivant :
1. Code js d'initialisation
//初始化
(function(){
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx); // 绘制多边形边
drawLines(mCtx); //顶点连线
drawText(mCtx); // 绘制文本
drawRegion(mCtx); // 绘制数据
drawCircle(mCtx); // 画数据圆点
})();Dans le code ci-dessus, tous les paramètres sont initialisés via une fonction d'exécution immédiate. Pour savoir comment dessiner un hexagone régulier sur une toile, voir Dessiner un hexagone régulier sur une toile
Dans le graphique en araignée, nous pouvons le diviser en une seule fois, en dessinant des hexagones, des lignes droites et des cercles, des composants individuels complets sont dessinés séparément, puis des appels unifiés sont dessinés via les méthodes
comme indiqué ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蜘蛛图canvas</title>
<style type="text/css">
canvas{
}
</style>
</head>
<body>
<script type="text/javascript">
var mW = 400;
var mH = 400;
var mData = [['法力', 77],['防御', 72],['生命值', 46],['物理伤害', 50],['回复值', 80],['耐力', 60]];
var mCount = mData.length; //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
//初始化
(function(){
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
})();
// 绘制多边形边
function drawPolygon(ctx){
ctx.save(); // save the default state
ctx.strokeStyle = mColorPolygon;
var r = mRadius/ mCount; //单位半径
//画6个圈
for(var i = 0; i < mCount; i ++){
ctx.beginPath(); //开始路径
var currR = r * ( i + 1); //当前半径
//画6条边
for(var j = 0; j < mCount; j ++) {
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
console.log('x:' + x, 'y:' + y);
ctx.lineTo(x, y);
}
ctx.closePath(); //闭合路径
ctx.stroke();
}
ctx.restore(); // restore to the default state
}
//顶点连线
function drawLines(ctx){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorLines;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
//绘制文本
function drawText(ctx){
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
}else{
ctx.fillText(mData[i][0], x, y);
}
}
ctx.restore();
}
//绘制数据区域
function drawRegion(ctx){
ctx.save();
ctx.beginPath();
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.restore();
}
//画点
function drawCircle(ctx){
ctx.save();
var r = mCenter / 18;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
}
ctx.restore();
}
</script>
</body>
</html>Recommandations associées :
Instance CSS3 de création d'une propriété de clip de polygone
le canevas dessine un polygone
Déterminer si un point appartient à un polygone dans MySQL_MySQL
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)
Introduction aux fonctions Python : Introduction et exemples de fonction exec
Nov 03, 2023 pm 02:09 PM
Introduction aux fonctions Python : Introduction et exemples de fonction exec Introduction : En Python, exec est une fonction intégrée utilisée pour exécuter du code Python stocké dans une chaîne ou un fichier. La fonction exec fournit un moyen d'exécuter dynamiquement du code, permettant au programme de générer, modifier et exécuter du code selon les besoins pendant l'exécution. Cet article explique comment utiliser la fonction exec et donne quelques exemples de code pratiques. Comment utiliser la fonction exec : La syntaxe de base de la fonction exec est la suivante : exec
Mar 22, 2024 pm 09:33 PM
Spécifications d'indentation et exemples du langage Go Le langage Go est un langage de programmation développé par Google. Il est connu pour sa syntaxe concise et claire, dans laquelle les spécifications d'indentation jouent un rôle crucial dans la lisibilité et la beauté du code. Cet article présentera les spécifications d'indentation du langage Go et les expliquera en détail à travers des exemples de code spécifiques. Spécifications d'indentation Dans le langage Go, les tabulations sont utilisées pour l'indentation au lieu des espaces. Chaque niveau d'indentation correspond à un onglet, généralement défini sur une largeur de 4 espaces. De telles spécifications unifient le style de codage et permettent aux équipes de travailler ensemble pour compiler
Explication détaillée de la fonction Oracle DECODE et exemples d'utilisation
Mar 08, 2024 pm 03:51 PM
La fonction DECODE dans Oracle est une expression conditionnelle souvent utilisée pour renvoyer différents résultats en fonction de différentes conditions dans les instructions de requête. Cet article présentera en détail la syntaxe, l'utilisation et un exemple de code de la fonction DECODE. 1. Syntaxe de la fonction DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr : l'expression ou le champ à comparer. recherche1,
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance
Nov 04, 2023 pm 03:15 PM
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Python est un langage de programmation puissant qui fournit de nombreuses fonctions intégrées pour rendre la programmation plus pratique et efficace. L'une des fonctions intégrées très utiles est la fonction isinstance(). Cet article présentera l'utilisation et des exemples de la fonction isinstance et fournira des exemples de code spécifiques. La fonction isinstance() est utilisée pour déterminer si un objet est une instance d'une classe ou d'un type spécifié. La syntaxe de cette fonction est la suivante
Introduction aux fonctions Python : fonctions et exemples de fonction eval
Nov 04, 2023 pm 12:24 PM
Introduction aux fonctions Python : fonctions et exemples de la fonction eval En programmation Python, la fonction eval est une fonction très utile. La fonction eval peut exécuter une chaîne sous forme de code de programme et sa fonction est très puissante. Dans cet article, nous présenterons les fonctions détaillées de la fonction eval, ainsi que quelques exemples d'utilisation. 1. Fonction de la fonction eval La fonction de la fonction eval est très simple : elle peut exécuter une chaîne sous forme de code Python. Cela signifie que nous pouvons convertir une chaîne
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
Introduction aux fonctions Python : fonctions et exemples de fonctions triées
Nov 03, 2023 pm 02:47 PM
Introduction aux fonctions Python : fonctions et exemples de fonctions triées Python est un langage de programmation très puissant avec une multitude de fonctions et de modules intégrés. Dans cette série d'articles, nous présenterons une par une les fonctions couramment utilisées de Python et fournirons des exemples correspondants pour aider les lecteurs à mieux comprendre et appliquer ces fonctions. Cet article présentera en détail les fonctions et les exemples de la fonction triée. La fonction sorted est utilisée pour trier un objet itérable et renvoyer une nouvelle liste triée. Peut être utilisé pour les chiffres et les mots
Application et exemple d'analyse de l'opérateur point PHP
Mar 28, 2024 pm 12:06 PM
Application et exemple d'analyse de l'opérateur point PHP En PHP, l'opérateur point ("".") est un opérateur utilisé pour connecter deux chaînes. Il est très couramment utilisé et très flexible lors de la concaténation de chaînes. En utilisant l'opérateur point, nous pouvons facilement concaténer plusieurs chaînes pour former une nouvelle chaîne. Ce qui suit présentera l'utilisation des opérateurs de points PHP à travers des exemples d'analyse. 1. Utilisation de base Examinons d’abord un exemple d’utilisation de base. Supposons qu'il existe deux variables $str1 et $str2, qui stockent respectivement deux mots.
