将 SVG 图像绘制到 CanvasRenderingContext2D 中

draw SVG image into CanvasRenderingContext2D

本文关键字:CanvasRenderingContext2D 绘制 SVG 图像      更新时间:2023-09-26

有没有可能做这样的事情

var image = new Image();
image.src = 'img.svg';
context.drawImage(image, x, y); // context is an instance of CanvasRenderingContext2D

带有 SVG 图像?实际上这段代码有效,但我认为图像被转换为.jpg或类似图像,因为如果我尝试缩放浏览器页面,图像会变得粗糙。

澄清:图像应该在画布上下文中多次重新绘制(即用于移动),因此"使用此库"之类的建议应考虑这一事实。

编辑

从之前的讨论来看,问题似乎是由于画布属性(画布不可浏览器缩放)而不是由于加载不正确。我可以获取并修改(最终)画布的此属性以实现我的目的吗?我必须在画布上绘画,不幸的是没有其他选择。

根据所需的缩放级别翻译渲染的 svg。

如何在所有现代浏览器中检测页面缩放级别?

解释浏览器缩放级别检测。你可以使用fabricjs进行画布操作(http://fabricjs.com/)。

相关文章:
  • 没有找到相关文章