画菱形三角形圆形HTML

在HTML中，你可以使用`<canvas>`元素以及JavaScript的绘图API来绘制各种形状，包括菱形、三角形和圆形。下面我会简要解释如何创建这些图形：

1. **菱形**:
使用CSS `transform` 属性可以创建菱形。首先，创建一个正方形div，并设置其边长。然后添加一些旋转和定位样式使其呈现菱形：

   <div class="diamond" style="width: 0; height: 0; border-left: 50px solid transparent;
                            border-right: 50px solid transparent;
                            border-bottom: 100px solid red;"></div>

CSS:

   .diamond {
     position: relative;
     transform-origin: bottom center;
     transform: rotate(45deg);
   }

2. **三角形**:

   <svg width="100" height="100">
     <polygon points="50,0 100,100 0,100" fill="blue" />
   </svg>

这里利用SVG的基本形状元素`polygon`来创建。

3. **圆形**:

   <circle cx="50" cy="50" r="40" fill="green"></circle>

或者使用SVG同样创建：

   <svg width="100" height="100">
     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="yellow" />
   </svg>

这些示例展示了基础的HTML+CSS和SVG方式，如果你需要更复杂的动画效果或使用JavaScript直接在Canvas上绘制，则需要结合JavaScript库如`fabric.js`或原生的`requestAnimationFrame`。