HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在HTML5画布上绘制SVG文件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有一种将SVG文件绘制到HTML5画布上的方法? Google Chrome支持将SVG作为图像加载(只需使用drawImagE),但开发人员控制台会警告该资源被解释为图像,但是以MIME类型image / svg xml传输。

我知道一个可能性是将SVG转换为画布命令(如this question),但我希望不需要。我不在乎旧的浏览器(所以如果FireFox 4和IE 9将支持一些东西,那就够了)。

解决方法

EDIT 2014年11月5日

您现在可以使用ctx.drawImage绘制在一些但不是所有浏览器中具有.svg源的HTMLImageElements。 Chrome,IE11和Safari的工作,Firefox工作与一些错误(但晚上修复它们)。

var img = new Image();
img.onload = function() {
    ctx.drawImage(img,0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

你应该在画布上看到一个绿色的正方形。页面上的第二个绿色方块是相同的< svg>元素插入DOM以供参考

您还可以使用新的Path2D对象来绘制SVG(字符串)路径(目前仅适用于ChromE)。换句话说,你可以写:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

Live example of that here.

老海报答案:

没有什么本机,允许你在canvas中本地使用SVG路径。你必须转换自己或使用图书馆为你做。

我建议看看canvg:

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

大佬总结

以上是大佬教程为你收集整理的在HTML5画布上绘制SVG文件全部内容,希望文章能够帮你解决在HTML5画布上绘制SVG文件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。