<svg> <canvas> 给定代码中的区别和实现是什么？

<body>
<svg width="200" height="200">
  <circle cx="100" cy="100" r="70" stroke-width="10" stroke="red" fill="green" />
</svg>
<canvas id="canvas01" width="200" height="200">
</canvas>
<script>
  var c = document.getElementById("canvas01");
  var cx = c.getContext("2d");
  cx.beginPath();
  cx.arc(100,100,70,0,2*Math.PI);
  cx.lineWidth = 10;
  cx.strokeStyle = 'red';
  cx.stroke();
  cx.fillStyle = 'black';
  cx.fill();
</script>     
 
</body>
</html>

我在比较<svg>和<canvas>的基础知识时缺少一些东西为什么输出中圆的边界宽度不同？stroke-width="10"和cx.lineWidth = 10是否应该给出相等的边框宽度？

fill stroke->覆盖一半中风。

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="70" stroke-width="10" stroke="red" fill="green" />
</svg>
<canvas id="canvas01" width="200" height="200"></canvas>
<script>
  var c = document.getElementById("canvas01");
  var cx = c.getContext("2d");
  cx.beginPath();
  cx.arc(100,100,70,0,2*Math.PI);
  cx.lineWidth = 10;
  cx.strokeStyle = 'red';
  cx.fillStyle = 'black';
  cx.fill();
  cx.stroke();
</script>

相关内容

最新更新

热门标签：