d3高级应用专题(一)：canvas与SVG之间的转换

最新推荐文章于 2024-08-23 08:04:14 发布

蚁方阵

最新推荐文章于 2024-08-23 08:04:14 发布

阅读量1w

点赞数

分类专栏： d3应用专题文章标签： d3 canvas svg d3应用专题

本文链接：https://blog.csdn.net/yiifaa/article/details/52142320

版权

本文介绍了d3的d3.path包如何将canvas绘制的路径转换为SVG，增强了代码的可移植性。虽然目前仅支持路径转换，但展示了canvas在绘图质量和性能上的优势。通过示例代码，呈现了转换后的效果。

摘要由CSDN通过智能技术生成

在第4版中，d3新增了d3.path包，可用于将canvas绘制的路径转换为SVG的路径，提高了代码的可移植性，能适应更多应用场景，无论是发挥canvas的高性能特点，还是发挥SVG的高控制性，都能轻松适应。

唯一可惜的是，canvas能向SVG转化的目前还只支持路径，所以在实际应用中，需要把路径的创建过程单独抽取出来，示例代码如下：

 var canvas = document.getElementById('canvas'),
    //  获取页面里SVG元素
    svgCtx = d3.select('#svgCanvas'),
    //  创建canvas上下文
    canvasCtx = canvas.getContext('2d');

//  绘制路径，既能适应canvas有能适应svg
function drawPath(context) {
   
    context.moveTo(