首頁猿問關于html中canvas使用sv...

關于html中canvas使用svg的問題

Html5

DIEA 2019-04-08 11:04:19

查看完整描述

2 回答

慕哥6287543

TA貢獻1831條經驗獲得超10個贊

1

2

3

4

5

6

7

8

9

window.onload = function () {

var ctx = document.getElementById("canvas").getContext('2d');

var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("svg"));

var img = new Image();

img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);

img.onload = function () {

ctx.drawImage(img, 0, 0);

};

}

ctx和svg_xml分別為canvas和svg對象；最后采取base64方式

反對回復 2019-04-09

楊魅力

TA貢獻1811條經驗獲得超6個贊

SVG 是一種使用 XML 描述 2D 圖形的語言。

Canvas 通過 JavaScript 來繪制 2D 圖形。

1. 對于畫在Canvas上的部件，你需要處理重繪。而SVG則不用，你修改svg dom則系統(tǒng)會自動幫你重繪

2.Hittest，即canvas不負責幫你偵測鼠標/觸摸事件發(fā)生在哪一個圖形元件上；而svg可以。

3.Canvas效率高得多canvas的工作方式就像傳統(tǒng)的2d圖形引擎比如GDI；而SVG的工作方式更像WPF(XAML)、HTML/CSS這類由標記控制的繪圖引擎

4.Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

5.SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。

反對回復 2019-04-09

慕粉52202
請問一下您，是否處理過將svg圖像渲染到canvas上，svg不顯示的問題，在小程序上，目前只能在css和wxss中能顯示出來，還有就是在開發(fā)工具上能顯示出來，但是在在真機上是無法顯示的，查了很多資料，都無法實現，小程序不支持svg在js中操作顯示，是不是就沒有別的轉換方式顯示了呢？

回復 2019-11-05