javascript – 如何在画布中渲染SVG的一部分?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在画布中渲染SVG的一部分?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

核心问题:

目标是将SVG的一部分呈现给网页上的固定大小的Canvas元素.

我尝试的解决方案:

看起来像CanVG似乎是在Canvas中渲染SVG图像最直接的方式我认为我可以利用viewBox属性在CanVG渲染之前裁剪图像.我在这一点上遇到了麻烦.

问题:

提供了一个SVG图像,如何将该图像的一部分呈现给Canvas元素?

最佳答案
>创建一个屏幕外画布并使用CanVG渲染它:

var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full,'

>使用drawImage将此canvas-as-image的一部分复制到另一个画布上的区域(请参阅参数详细信息的链接):

var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,60);

编辑:但是,如果您可以访问SVG源(直接在JS中或通过XMLHTTP请求),则无需执行上述操作,并且可以在呈现之前修改viewBox属性.请参见this demo,其中显示直接呈现到一个画布的SVG文件,然后更改viewBox属性并将剪切的区域呈现到另一个画布.

猜你在找的JavaScript相关文章