                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

SVG與Canvas 可以重疊在一起嗎

SVG與canvas完全重疊，我想做個(gè)地圖的可視化，在地圖上加線條動(dòng)畫，想用SVG畫地圖，在地圖上獲取坐標(biāo)，然后在canvas層畫線條動(dòng)畫

阿呆不呆

2015-01-30

源自：Canvas繪圖詳解 9-1

關(guān)注問題我要回答

4539

操作

收起

3 回答

摘星fy
2020-05-24

canvas可以直接載入svg，下面附上代碼

<!DOCTYPE?html>????
<html?lang="en">????
<head>????
<meta?charset="UTF-8">????
<title>Document</title>????
</head>????
<body>????
<svg?id="svg"?width="100"?height="100"?style="background:?wheat;">????
<circle?cx="50"?cy="50"?r="25"?fill="red"></circle>????
</svg>????
<canvas?id="canvas"?style="background:?pink"></canvas>????
<script>????
const?canvas?=?document.getElementById('canvas')????
const?gd?=?canvas.getContext('2d')????
const?svg?=?document.getElementById('svg')????
let?xml?=?new?XMLSerializer().serializeToString(svg)????
xml?=?encodeURIComponent(xml)????
xml?=?unescape(xml)????
xml?=?btoa(xml)????
const?img?=?new?Image()????
img.src?=?'data:image/svg+xml;base64,'?+?xml????
img.onload?=?()?=>?{????
console.log(img.width,?img.height)????
gd.drawImage(????
img,????
0,?0,?img.width,?img.height????
)????
}????
</script>????
</body>????
</html>