亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法在畫布上加載 svg

無法在畫布上加載 svg

倚天杖 2022-11-03 10:59:43
我這里有一張畫布。我正在嘗試在此上繪制一個 svg,但它根本不起作用。如果我使用png文件,它可以正常工作。drawPlayer() {    this.xCord = this.colNum * this.width;    this.yCord = this.rowNum * this.height;    let rat = new Image();    let player = this;            rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord,         player.width, player.height);}    rat.src = "Lik-Rong-IT.svg";}我也試過這種方式-<img src="Lik-Rong-IT.svg" id="rat" style="display: none"/>drawPlayer() {    this.xCord = this.colNum * this.width;    this.yCord = this.rowNum * this.height;    let rat = document.querySelector("#rat");    let player = this;    rat.onload = function() {player.ctx.drawImage(rat, player.xCord, player.yCord,         player.width, player.height);}}但這也不起作用(即使是 png?。?。我已經查找了我可以在我的代碼中找到的任何錯誤,但沒有運氣。請幫我找出問題!鏈接到項目 - https://codesandbox.io/s/maze-p2pyo
查看完整描述

1 回答

?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

要在畫布上繪制 SVG,其中一種方法可以是首先將內聯SVG 轉換為 Base 64,然后使用drawImage. 這里唯一的事情是 SVG 應該是inline。

此外,我分叉了您的代碼并應用了這些更改,它似乎正在工作:https ://codesandbox.io/s/maze-2wb5d

const canvas = document.querySelector('canvas');

const ctx = canvas.getContext('2d');


const svg = new Image();


var xml = new XMLSerializer().serializeToString(document.querySelector('svg'));


// Convert it to base64

var svgBase64 = btoa(xml);

var imageBase64 = 'data:image/svg+xml;base64,' + svgBase64;


svg.src = imageBase64;


svg.onload = function() {

    ctx.drawImage(svg, 0, 0, 32, 32);

};

svg {

    display: none;

}

<svg width="24" height="24" viewBox="0 0 24 24"><path d="M1,12C1,10.19 2.2,8.66 3.86,8.17C5.29,5.11 8.4,3 12,3C15.6,3 18.71,5.11 20.15,8.17C21.8,8.66 23,10.19 23,12C23,13.81 21.8,15.34 20.15,15.83C18.71,18.89 15.6,21 12,21C8.4,21 5.29,18.89 3.86,15.83C2.2,15.34 1,13.81 1,12M14.5,9.25A1.25,1.25 0 0,0 13.25,10.5A1.25,1.25 0 0,0 14.5,11.75A1.25,1.25 0 0,0 15.75,10.5A1.25,1.25 0 0,0 14.5,9.25M9.5,9.25A1.25,1.25 0 0,0 8.25,10.5A1.25,1.25 0 0,0 9.5,11.75A1.25,1.25 0 0,0 10.75,10.5A1.25,1.25 0 0,0 9.5,9.25M7.5,14C8.26,15.77 10,17 12,17C14,17 15.74,15.77 16.5,14H7.5M3,12C3,12.82 3.5,13.53 4.21,13.84C4.07,13.25 4,12.63 4,12C4,11.37 4.07,10.75 4.21,10.16C3.5,10.47 3,11.18 3,12M21,12C21,11.18 20.5,10.47 19.79,10.16C19.93,10.75 20,11.37 20,12C20,12.63 19.93,13.25 19.79,13.84C20.5,13.53 21,12.82 21,12Z" /></svg>


<canvas />


查看完整回答
反對 回復 2022-11-03
  • 1 回答
  • 0 關注
  • 94 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號