如何在 HTML 中用 JavaScript 创建圆形、正方形或三角形？

Question

我是编码新手，我正在尝试在单击后随机创建三种不同的形状 - 圆形、正方形和三角形。我已经让我的代码随机创建一个圆或正方形，但三角形总是在正方形或圆形元素内，而不是单独存在。我如何才能让它出现一个圆形、正方形或三角形，而不是只有一个正方形或里面有一个三角形的圆形？

<div id="shape1"></div>

CSS 样式（我尝试将三角形设置为 "base" 形状。

#shape1 {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}

main.js

setTimeout(function () {
        if (Math.random()<=0.3){
            document.getElementById("shape1").style.borderRadius="50%";
        }
        else if (Math.random()<=0.6){
            document.getElementById("shape1").style.borderRadius="0";
        }
        else {
            document.getElementById("shape1").style = this.self;
        }

如有任何帮助，我们将不胜感激。最好的编码给你。

Answer 1

您可以定义三个不同的 CSS classes - 每个形状一个 class。请注意，样式表中的 classes 以点“.”开头。并通过使用 class="..." 属性应用于 DOM 元素。

在您的 CSS 文件中定义这四个 CSS 规则：

#shape1 {
    /* common styles for all shapes */
}

.square {
    /* square specific CSS */
}
.circle {
    /* circle specific CSS */
}
.triangle {
    /* triangle specific CSS */
}

您现在可以做的只是在元素上设置正确的 class:

var shape = document.getElementById("shape1");

if (Math.random()<=0.3){
    shape.className = "square";
}
else if (Math.random()<=0.6){
    shape.className = "circle";
}
else {
    shape.className = "triangle";
}

我希望这就是你想要做的 ;)。

Answer 2

你快搞定了。只需为每个形状应用所有边框属性。

片段：

setInterval(function () {
  var shape1= document.getElementById("shape1");
  if (Math.random()<=0.3){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="50%";
  }
  else if (Math.random()<=0.6){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="0";
  }
  else {
    shape1.style.borderLeft= shape1.style.borderRight= '100px solid transparent';
    shape1.style.borderBottom= '200px solid #2f2f2f';
    shape1.style.borderTop= '0';
    shape1.style.borderRadius="0";
  }
},500);

#shape1 {
  width: 0px;
  height: 0px;
  font-size: 0;
  line-height: 0;
}

<div id="shape1"></div>

Answer 3

您也可以使用 svg。

在 defs 标签中定义形状，在点击事件中使用随机形状。

var shape = document.getElementById('shape');
var shapes = ['circle', 'square', 'triangle'];
shape.addEventListener('click', function() {
  shape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + shapes[Math.floor(Math.random() * shapes.length)]);
})

<svg width="200" height="200">
  <defs>
    <path id="circle" d="M0,100 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0" fill="rosybrown" />
    <path id="square" d="M0,0 h200 v200 h-200z" fill="tan" />
    <path id="triangle" d="M100,0 l100,200 h-200z" fill="teal" />
  </defs>
  <use id="shape" xlink:href="#circle" />
</svg>

如何在 HTML 中用 JavaScript 创建圆形、正方形或三角形？

How to create circle, square or triangle with JavaScript in HTML?

html

javascript

css

shapes