Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose-html教程-PHP中文网

Html5 canvas中如何用使用svg对象。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:15:32

原创

1570人浏览过

在canvas中使用drawImage，吧svg对象作为参数传入，无法显示。不知道是不是drawImage不支持这个类型的对象参数。求解。。。

回复讨论(解决方案)

参见方法
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm

我贴一段代码给你：

登录后复制

  test

    fail

其实我很想知道 drawImage 这个方法的第一个参数可以接受的图像类型是什么都有哪些？？

在支持svg的浏览器中进行测试，如Firefox16,Chrome

<html> <head>  <title>test</title>  <style>  svg, canvas { margin:1em }  </style> </head> <body>  <p>  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="i">  FAIL  <circle cx="50px" cy="50px" r="50px" fill="lime"/>  </svg>  <canvas width="100" height="100" id="c">FAIL</canvas>  </p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1989">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679968212304.png" alt="AppMall应用商店">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1989">AppMall应用商店</a>
                            <p>AI应用商店，提供即时交付、按需付费的人工智能应用服务</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AppMall应用商店">
                                <span>56</span>
                            </div>
                        </div>
                        <a href="/ai/1989" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AppMall应用商店">
                        </a>
                    </div>
                  <script type="text/javascript">      window.onload = function () {          var ctx = document.getElementById("c").getContext('2d');          var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("i"));           var img = new Image();          img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);          img.onload = function () {              ctx.drawImage(img, 0, 0);          };      }  </script> </body></html>

登录后复制

其实我很想知道 drawImage 这个方法的第一个参数可以接受的图像类型是什么都有哪些？？

可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数