Javascript 圆角div的实现代码

一、实现圆角div的方式

实现圆角div有很多不同的方式，其中比较常用的方式有两种：使用 CSS3 border-radius 属性和使用 JavaScript 绘制。

1. 使用 CSS3 border-radius 属性实现圆角div

CSS3 的 border-radius 属性用于设置元素的圆角半径。通过设置不同的数值，可以实现各种形状的圆角，包括左上角、左下角、右上角、右下角等。具体使用方法如下：

div {
  border-radius: 10px; /* 设置四个角的圆角半径为 10px*/
  border-top-left-radius: 20px; /* 设置左上角圆角半径为 20px */
  border-top-right-radius: 30px; /* 设置右上角圆角半径为 30px */
  border-bottom-left-radius: 40px; /* 设置左下角圆角半径为 40px */
  border-bottom-right-radius: 50px; /* 设置右下角圆角半径为 50px */
}

上述代码中，我们通过设置 border-radius 属性和各个特定的圆角属性，可以实现不同的圆角效果。

1. 使用 JavaScript 实现圆角div

如果我们没有使用 CSS3 的条件，或者需要更加灵活的绘制方式，可以使用 JavaScript 绘制来实现圆角div。这里我们将使用 canvas 绘制来完成圆角的绘制。具体实现如下：

<div id="myCanvas"></div>

var div = document.getElementById("myCanvas");
var ctx = div.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, 5);
ctx.arcTo(0, 0, 5, 0, 5);
ctx.lineTo(25, 0);
ctx.arcTo(30, 0, 30, 5, 5);
ctx.lineTo(30, 25);
ctx.arcTo(30, 30, 25, 30, 5);
ctx.lineTo(5, 30);
ctx.arcTo(0, 30, 0, 25, 5);
ctx.lineTo(0, 5);
ctx.stroke();
ctx.fill();

上述代码中，我们首先通过 document.getElementById() 方法获得了指定的 div 元素，随后通过使用 getContext() 方法获取了该 div 元素的上下文。在上下文中，我们设置了填充色、描边色和描边宽度等参数。接着，我们通过调用 beginPath() 方法清空当前路径，并通过 moveTo()、arcTo() 和 lineTo() 方法绘制了一个圆角矩形。最后通过 stroke() 和 fill() 方法来完成圆角div的绘制。

二、示例说明

1. 使用 CSS3 实现圆角div

使用 CSS3 实现圆角div非常简单。我们只需要在 CSS 文件中设置好 border-radius 属性，并将其应用于相应的元素即可。例如，下面的代码展示了如何使用 CSS3 实现一个具有不同圆角半径的圆角div。

<div class="myDiv"></div>

.myDiv {
  width: 200px;
  height: 150px;
  background-color: #FF0000;
  border-radius: 10px 20px 30px 40px;
}

上述代码中，我们首先创建了一个名为 myDiv 的 div 元素，并为其设置了宽度、高度和背景色等样式。其中，我们通过设置 border-radius 属性，并依次指定四个圆角的半径大小，实现了不同圆角的效果。

1. 使用 JavaScript 实现圆角div

使用 JavaScript 实现圆角div需要通过 canvas 绘制实现。下面的代码展示了如何使用 JavaScript 和 canvas 绘制实现圆角div。

<div id="myCanvas"></div>

var div = document.getElementById("myCanvas");
var ctx = div.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "#0000FF";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, 5);
ctx.arcTo(0, 0, 5, 0, 5);
ctx.lineTo(25, 0);
ctx.arcTo(30, 0, 30, 5, 5);
ctx.lineTo(30, 25);
ctx.arcTo(30, 30, 25, 30, 5);
ctx.lineTo(5, 30);
ctx.arcTo(0, 30, 0, 25, 5);
ctx.lineTo(0, 5);
ctx.stroke();
ctx.fill();

上述代码中，我们首先创建了一个 id 为 myCanvas 的 div 元素，用于承载 canvas 元素。随后，通过 document.getElementById() 方法获取了该 div 元素，并通过 getContext() 方法获取 canvas 绘制上下文对象。通过设置 fillStyle、strokeStyle、lineWidth 等参数，我们在上下文中定义了圆角div的样式。最后，通过 beginPath() 方法开始绘制路径，并将其保存在上下文中。随后，调用 arcTo()、lineTo() 方法绘制了圆角矩形。最后通过 stroke() 和 fill() 方法来绘制并填充圆角div的颜色。

以上，就是实现圆角div的两种方式及示例说明。