canvas中用图片设置背景不一定显示问题

canvas中用图片设置背景不一定显示问题

问题阐述

• 在html5中使用canvas组件，用图片作为canvas的背景，当不间断的访问页面时，onload后图片不一定能够展示出来

页面展示

• 

核心代码【有问题的】

 

// 获取canvas对象
const c = document.getElementById("myCanvas");
// 创建img对象
const img2 = document.createElement('img');
// 设置src值
img2.src = encodeURI("图片url");
//设置canvas属性
img2.onload = function () {
    c.width = img2.width;
    c.height = img2.height;
    c.style.backgroundSize = `${img2.width}px ${img2.height}px`;
    c.style.backgroundImage = 'url(' + img2.src + ')';//注意这行
}

解决

 

// 获取canvas对象
const c = document.getElementById("myCanvas");
// 创建img对象
const img2 = document.createElement('img');
// 设置src值
img2.src = encodeURI("图片url");
//设置canvas属性
img2.onload = function () {
    c.width = img2.width;
    c.height = img2.height;
    c.style.backgroundSize = `${img2.width}px ${img2.height}px`;
    c.style.backgroundImage = 'url("' + img2.src + '")';//改动这行
}

没错，用双引号将url包裹起来就可以!