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

Question

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

I am missing something here while comparing basics of <svg> and <canvas> Why is the border width of the circles in output different? 在比较<svg>和<canvas>基础知识时，这里缺少某些内容为什么输出中的圆的边框宽度不同？ Isn't the stroke-width="10" and cx.lineWidth = 10 supposed to give the equal border width? 是否应该将stroke-width="10"和cx.lineWidth = 10赋予相等的边框宽度？

Answer 1

You fill after stroke -> overwrite half the stroke. 您在stroke之后fill ->覆盖描边的一半。

 <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 个解决方案

解决方案1
2 已采纳 2018-03-24 12:42:49

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-24 12:42:49

解决方案1
2 已采纳 2018-03-24 12:42:49