canvas - drawImage()方法绘制图片不显示的问题
问题:
<canvas id="canvas1"></canvas>
var cav1 = document.getElementById('canvas1'),wWidth = 800,wHeight = 600;cav1.width = wWidth;cav1.height = wHeight;
var ctx1 = cav1.getContext('2d');
var bgImg = new Image(); bgImg.src = 'images/background.jpg';
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
<img src="./images/background.jpg" id="imgs" style="display:none"></img>
var bgImg = document.getElementById('imgs')
再次执行绘图竟然可以了。
<img src=""> window.onload = function(){drawImage }
如果不是在html结构中插入的图片,就被我的粗心绕过了这个限制:
解决:
1. 标签+window.onload
<img src=""> window.onload = function(){context.drawImage() }
1-2. 后期插入标签?是否可行
var myImg = document.createElement('img'); myImg.src = '///'; document.body.appendChild(myImg); ctx1.drawImage(myImg,0,0,wWidth,wHeight);
var bgImg = new Image(); bgImg.src = 'images/background.jpg';
2. 定时器异步实现
setTimeout(function(){ctx1.drawImage(bgImg,0,0,wWidth,wHeight); },10)
这里为什么延迟写了10,没写大家熟悉的1000或者0呢?
因为在我的特定wifi环境特定台式机电脑的测试下,10能在图片加载完后刚好图片出来,而不像0那样不出来,也不想1000那样等半天出来。
可是试想一下,换一个更大的图,这个10还适用吗?wifi换成2g这个10还适用吗?
3. img.onload
1 bgImg.onload = function(){ 2 console.log('图片加载成功'); 3 console.log(this); 4 ctx1.drawImage(bgImg,0,0,wWidth,wHeight); 5 }
bgImg.onload = function(){ctx1.drawImage(bgImg,0,0,wWidth,wHeight);}/* 绘制红线如下: */ctx1.beginPath();ctx1.moveTo(10,wHeight);ctx1.lineTo(10,wHeight-100);ctx1.lineWidth = 20;ctx1.strokeStyle = 'red';ctx1.stroke();ctx1.closePath();
但我F5按下依旧没有变化,还是看不到红线。
找了半天直到我把背景图关掉才看到:
啊,原来他被背景图盖住啦!
可是,为什么呢?
我在想有两种可能
1、层级问题
2、先后问题
关于1,就像css的z-index那种感觉,是背景图在上盖住了红线。难道说背景图的层级比红线高?
这个设想我没法测试,于是放弃进行第二种可能的揭秘。
可是为什么背景图会在上呢?是因为背景图后画?
这个可以最简便的通过console.log()打印观察执行顺序
原来“罪魁祸首”竟然是onload这个回调。他跟定时器一样,都是一个异步任务。自然排在了同步任务(下边的绘制线条)的后边
所以前边看似是一个很好的解决方法——onload,在这里也暴露了他的弊端。
很好、看来,promise学习大计宜趁早提上日程啊!哈哈哈
转载于:https://www.cnblogs.com/padding1015/p/9717845.html
canvas - drawImage()方法绘制图片不显示的问题相关推荐
- canvas drawImage方法不显示图片的解决方案
canvas drawImage方法不显示图片的解决方案 参考文章: (1)canvas drawImage方法不显示图片的解决方案 (2)https://www.cnblogs.com/undefi ...
- html图片上面怎么 画,HTML5使用drawImage()方法绘制图像
一.绘制图像 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本. drawImage(image,x,y) : 在canvas中(x,y)处绘制图片. drawImage(i ...
- html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
- uniapp canvas踩雷 文字模糊 图片不显示 ios系统无法下载
uniapp小程序项目中使用canvas实现本地保存海报 1.问题一,使用canvas保存到本地的图片中文字模糊 解决: <canvas :style="{width:windowW+ ...
- 精通Android自定义View(九)绘制篇Canvas分析之绘制图片
绘制图片分为:绘制矢量图(drawPicture)和 绘制位图(drawBitmap) 1 drawBitmap 1.1 基本的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,to ...
- android中Canvas使用drawBitmap绘制图片
1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float ...
- canvas drawImage() 方法
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); context.drawImage(img, dx, dy); contex ...
- HTML5 canvas drawImage() 方法记录
浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 drawImage() 方法. 注释:Internet Explorer 8 或 ...
- 关于pandas绘制图片不显示问题
只用pandas绘制图片可能可以编译,但是不会显示图片. n = 1024 # data size df = pd.DataFrame({"x": np.random.normal ...
最新文章
- HBM显存技术与市场前景
- 树状数组 + 扫描线 ---- BZOJ1818[内部白点][树状数组+扫描线]
- 三、hbase JavaAPI
- 用软件如何识别pdf文字
- Android --- 夜神模拟器中没有图片怎么办?夜神模拟器中怎么导入图片?
- Python执行 shell 命令并实时打印输出
- ASP.NET MVC SSO单点登录设计与实现
- jq动态获取input的值传给html,jquery 保证html()拿到的html字符串包含input的value值
- 蓝桥杯 平面切分(欧拉定理)
- 海马扫描Linux,海马扫描公式识别软件
- 【新知实验室】-多人视频会议体验
- ue4+html5动态加载pak,UE4 pak生成和加载
- 阿里云轻量级应用服务器如何使用?
- 潇洒郎: windows、centos学习Influxdb下载安装 重置用户、密码 influx语法 数据写入与读取、查询 修改默认启动端口
- 单片机毕业设计 stm32智能路灯设计与实现
- Spark系列之SparkSubmit提交任务到YARN
- 笔试总结——0322联通软笔C++
- 一分钟速看:《永不止步的云上创新》——蒋江伟
- 嵌入式系统(五):RISC-V4
- MySQL学习笔记-第一篇-基础知识与命令