Paramètres du rectangle arrondi JavaScript

Dans la conception et le développement de sites Web, les rectangles arrondis sont souvent utilisés pour embellir l'interface, et JavaScript est l'un des outils courants pour obtenir cet effet. Cet article explique comment utiliser JavaScript pour définir l'effet de rectangle arrondi.

1. CSS pour implémenter un rectangle arrondi

Avant de présenter JavaScript pour implémenter un rectangle arrondi, comprenons d'abord comment implémenter un rectangle arrondi avec CSS. La propriété border-radius introduite dans CSS3 peut facilement définir la taille des coins arrondis des éléments. Par exemple :

div {
    border-radius: 10px;
}

Cela donnera à un élément div un effet arrondi de 10 px sur les quatre coins. Si vous souhaitez uniquement définir un coin arrondi pour un certain coin, vous pouvez utiliser le code suivant :

div {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 15px;
}

Cela rendra les coins arrondis du coin supérieur gauche, du coin supérieur droit, du coin inférieur gauche et coin inférieur droit de l'élément div 10px respectivement, 20px, 5px et 15px.

2. JavaScript pour implémenter un rectangle arrondi

Si vous devez créer dynamiquement un rectangle arrondi en JavaScript, vous pouvez utiliser l'élément canvas. Canvas est une balise HTML5 qui peut être utilisée pour dessiner des graphiques, des animations, etc.

Voici les étapes pour dessiner un rectangle arrondi à l'aide de JavaScript et de Canvas :

1. Obtenez l'élément canvas et son objet contextuel
#🎜 ; 🎜#

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Dessinez un chemin et définissez la taille des coins du rectangle arrondi

2. ctx.beginPath();
   ctx.moveTo(x + cornerRadius, y);
   ctx.lineTo(x + width - cornerRadius, y);
   ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
   ctx.lineTo(x + width, y + height - cornerRadius);
   ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
   ctx.lineTo(x + cornerRadius, y + height);
   ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
   ctx.lineTo(x, y + cornerRadius);
   ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);

Définissez la couleur de remplissage et de contour, la largeur et autres attributs

3. ctx.fillStyle = "#ff0000";  // 填充颜色
   ctx.strokeStyle = "#000";   // 描边颜色
   ctx.lineWidth = borderSize; // 描边宽度

Remplissez ou tracez le chemin. Vous pouvez utiliser à la fois les méthodes de remplissage et de contour, ou une seule d'entre elles.

4. ctx.fill();     // 填充路径
   ctx.stroke();   // 描边路径

Pour résumer, le code JavaScript de l'ensemble du processus de dessin est le suivant :

function drawRoundedRect(x, y, width, height, cornerRadius, borderSize) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // 绘制路径
    ctx.beginPath();
    ctx.moveTo(x + cornerRadius, y);
    ctx.lineTo(x + width - cornerRadius, y);
    ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
    ctx.lineTo(x + width, y + height - cornerRadius);
    ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
    ctx.lineTo(x + cornerRadius, y + height);
    ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
    ctx.lineTo(x, y + cornerRadius);
    ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);

    // 设定颜色、宽度等属性
    ctx.fillStyle = "#ff0000";  // 填充颜色
    ctx.strokeStyle = "#000";   // 描边颜色
    ctx.lineWidth = borderSize; // 描边宽度

    // 填充路径或描边路径
    ctx.fill();     // 填充路径
    ctx.stroke();   // 描边路径
}

Utilisez cette fonction pour dessiner un rectangle arrondi dans la zone spécifiée , tel que : # 🎜🎜#

drawRoundedRect(50, 50, 200, 100, 20, 3);

Cela dessinera un rectangle arrondi aux coordonnées (50, 50) avec une largeur de 200, une hauteur de 100, un coin arrondi de 20 px et une largeur de trait de 3 px.

3. Résumé

Cet article présente deux méthodes pour obtenir l'effet rectangle arrondi : CSS et JavaScript. CSS peut facilement définir la taille des coins arrondis des éléments, mais il ne fonctionne que sur les pages statiques. Si vous devez créer dynamiquement un effet de rectangle arrondi en JavaScript, vous pouvez utiliser l'élément Canvas. Dessinez un chemin sur Canvas et définissez des propriétés telles que la couleur et la largeur pour obtenir un effet de rectangle arrondi.

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!