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

ゞ浴缸里的玫瑰 2022-03-12 06:07 388阅读 0赞

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

### **问题阐述** ###

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

### **页面展示** ###

*  ![pocLhfq.png][]

### **核心代码【有问题的】** ###

// 获取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包裹起来就可以!** #

[pocLhfq.png]: https://i.imgur.com/pocLhfq.png

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 背景图片不显示_HTML

1.HTML是超文本标记语言。 2.HTML不需要翻译，直接由浏览器执行。 3.HTML文件是一个文本文件 4.HTML文件必须使用HTML或HTM为文件名后缀 5.H

- 日理万妓/ 2023年01月10日 13:08/ 0 赞/ 235 阅读

相关 android中的CheckBox改变背景图片后图片显示大小不正确的问题

今天在工作中遇到一个需求：点击按钮后改变页面中相关显示并改变点击按钮的背景图片显示，最后决定用checkbox来实现，这个时候就需要写一个选择器放两张图片，分别设置为选中时的状

女爷i/ 2022年07月31日 01:06/ 0 赞/ 316 阅读

相关 TextView设置背景图片为.9.png文字不显示

今天在开发中设置了TextView背景图片为.9.png时文字忽然就不显示了，例子如下 <TextView android:id="@+id/tv_h

我就是我/ 2022年06月10日 03:36/ 0 赞/ 536 阅读

相关解决有道笔记不显示背景图片问题有道云笔记不显示背景图片问题

解决有道笔记不显示背景图片问题有道云笔记不显示背景图片问题一、问题：安装了有道笔记，不显示背景图 1、如下图所示： ![Sou

阳光穿透心脏的1/2处/ 2022年06月06日 09:09/ 0 赞/ 415 阅读

相关 div嵌套时背景图片不显示问题解决方法

1. 常见的子div背景把父div背景给盖住了解决方法：在他们两个div样式里设置z-index属性值，父div的值大于子div的值，值越大越靠近屏幕，不过请注意的是z

水深无声/ 2022年05月27日 08:53/ 0 赞/ 266 阅读

相关 css同时设置多个背景背景图片显示的先后顺序问题

css 的background 可以设置多个背景图片：下面这个类名为 abc 的样式设置了两个背景图片，分别为：test.png 和 test2.jpg ,也就是说需要设置

妖狐艹你老母/ 2022年05月19日 00:14/ 0 赞/ 232 阅读

相关 Qt背景不显示问题

> 背景不显示的只有主窗口会发生，原因是主窗口使用的QWidget类解决办法重构paintEvent事件，添加即可 void LoginWidget::pa

曾经终败给现在/ 2022年05月14日 02:48/ 0 赞/ 966 阅读

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

canvas中用图片设置背景不一定显示问题问题阐述在html5中使用canvas组件，用图片作为canvas的背景，当不间断的访问页面时，onload后图

ゞ浴缸里的玫瑰/ 2022年03月12日 06:07/ 0 赞/ 389 阅读

相关 Vue项目设置背景图片，IOS图片显示不出

在Vue项目开发中，有时候我们要向页面中添加一些背景图片，可是当我们在样式中添加了背景图片，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，列如下

女爷i/ 2022年02月25日 08:15/ 0 赞/ 614 阅读

相关关于不设置div高度时，背景图片或背景颜色不显示的问题

在写一个网页时，遇到div高度不定时，即高度设为auto,或者不设置时，加入的的背景图片不能显示的问题。在查阅相关资料后发现几种解决方法出现这种情况有两个前提： 1.

旧城等待，/ 2022年02月13日 07:41/ 0 赞/ 839 阅读