Question

Range

我在遗漏<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"应该给出相等的边框宽度？

Answer 1

fill后的stroke - ＆gt;覆盖了一半的中风。

<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>

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

1 个答案: