Question

我想使用HTML5 GRAPHICS绘制一个圆圈。这是因为我希望能够编辑圆的半径。并且圈子需要是可选择的。

是否有可能使用javascript执行此操作？

Answer 1

你的范例对我来说没有意义，但你可以通过这样的方式轻松画出一个圆圈：

<div style="display:inline-block; 
        background:#f00; 
        width:250px; 
        height:250px; 
        border-radius:125px"></div>

确保您的边框半径至少是宽度/高度的一半。

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Circle</title>
</head>
<body>

<style type="text/css">
  div.circle {
    border: 3px solid green;
    border-radius: 50%;
    width: 100px; 
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
  }
</style>

<div class=circle></div>

</body>
</html>

Answer 3

根据您需要的浏览器支持级别，您可以使用内联svg。

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

绘制没有HTML5画布的圆圈

3 个答案: