给定代码中<svg>与<canvas>的实现差异是什么？

嘿，咱们来拆解你这段代码里SVG和Canvas的核心差异，结合具体实现逐一分析：

• SVG是声明式渲染：你只需要用类似HTML的标签定义「要画什么」就行。比如代码里的<circle>标签，直接通过cx/cy（圆心）、r（半径）、stroke（描边色）、fill（填充色）这些属性描述图形的最终状态，浏览器会自动解析并渲染这个DOM元素。
• Canvas是命令式渲染：你得通过JavaScript给浏览器一步步下达「怎么画」的指令。看你的Canvas代码：先获取画布上下文，开始路径，绘制圆弧，设置线宽和描边色，执行描边，再设置填充色，最后填充图形——全程是给浏览器递操作手册，而不是直接说最终要什么。

• SVG的图形是独立DOM元素：那个<circle>是DOM树里的一个节点，你之后可以轻松用JS修改它的属性（比如document.querySelector('circle').setAttribute('fill', 'blue')），或者用CSS控制样式，每个图形都是独立可访问的。
• Canvas是一块像素画布：一旦把圆画在Canvas上，它就变成了像素的一部分，没法直接「选中」这个圆来修改颜色或位置——要改的话只能清空对应区域，重新绘制整个图形（甚至整个画布）。

• SVG用标签属性或CSS：你的SVG圆直接用stroke-width="10"、fill="green"这类内联属性定义样式，也可以把样式写到CSS类里（比如.my-circle { stroke: red; fill: green; }），再绑定到<circle>标签上。
• Canvas样式和绘制指令绑定：样式是设置在画布上下文上的，而且必须在执行绘制指令前配置好。比如你先设置cx.lineWidth = 10和cx.strokeStyle = 'red'，再调用cx.stroke()；之后设置cx.fillStyle = 'black'，再调用cx.fill()。每一次绘制操作都会用当前上下文的样式，要是后续画别的图形需要不同样式，得重新设置。

• SVG自带语义：<circle>标签本身就有明确的语义，屏幕阅读器等辅助技术能识别这是一个圆形元素，你还能加ARIA属性或文本标签提升可访问性。
• Canvas是无语义位图：对辅助技术来说，Canvas就是一块空白图像，里面的内容没有任何语义信息。如果要做可访问性优化，得手动添加ARIA角色、隐藏文本等额外内容来描述画布上的图形。

• SVG适合静态/需频繁修改的图形：如果要频繁更新单个图形（比如点击切换圆的颜色），修改SVG的DOM节点效率很高，操作也简单，很适合做图标、logo或简单交互图形。
• Canvas适合动态/复杂渲染场景：做动画、游戏、实时数据可视化，或者每秒要绘制上百个图形的场景，Canvas性能更好——因为它直接操作像素，没有DOM节点的开销。你的Canvas代码虽然更繁琐，但能提供底层控制，很适合动态内容。

内容的提问来源于stack exchange，提问作者Chandan Rg