html5+上下左右边界顺序,详解canvas绘制多张图的排列顺序问题
在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,排在数组前面的图片不一定能先被load然后绘制,就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重定向的图片尤为明显),我的解决办法是:先全部画出来再排序再append到需要的节点里去。
let imgArray = ['img1.png', 'img2.png'];
let receiveArray = new Array();
let $myContent = document.getELmentById("myContent");
let {imgW, imgH} = {300, 300};
let Canvas = document.createElement('canvas');
let ctx = Canvas.getContext("2d");
let scaleBy = 2;
Canvas.width = imgW * scaleBy;
Canvas.height= imgH * scaleBy;
imgArray.forEach((e, idx) => {
let img = new Image();
img.src = e;
e.addEventListener('load', () => {
ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy);
let imgCont = new Image();
imgCont.src = Canvas.toDataURL();
imgCont.id = 'img' + idx;
receiveArray.push(imgCont); // 将绘制的img节点收集到数组里,这里的顺序可能和imgArray的顺序不一样
if (receiveArray.length === imgArray.length) { //所有图片load并绘制完成
let sortArr = new Array();
receiveArray.forEach(ex => { //将所有绘制图片按imgArray顺序排序
sortArr[ex.id.split('img')[1]] = ex;
})
sortArr.forEach(ex2 => {
$myContent.appendChild(ex2)
})
}
})
})
其实这也是一种略显无奈的做法,因为无法判断加载图片的实际大小,小的图片会先load并绘制,如果重定向域名后会加大这种现象,采用了绘制完再排序的做法。如果有谁想到更好的办法,欢迎指正批评。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5+上下左右边界顺序,详解canvas绘制多张图的排列顺序问题相关推荐
- canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
您好,请教您一个html5 canvas的问题: 我在canvas您好,请教一个html5 canvas的问题: 我在canvas中画了多个图形,有图像canvas可以实现 首先canvas要响应鼠标 ...
- canvas绘制多张图的排列顺序问题
在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,排在数组前面的图片不一定能先被load然后绘制,就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重 ...
- python画折线图详解-python绘制简单折线图代码示例
1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt ...
- html5 调用手机摄像头详解
html5 调用手机摄像头详解 首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的. 注意: 我们采用的是 640X480的分辨率,如 ...
- 视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
- seaborn clustermap详解及绘制
seaborn clustermap详解及绘制 seaborn提供了一个叫作clustermap的功能,除了可以采用热力图对相关系数进行可视化,还可以对变量根据相关系数进行聚类,即发现热力图数据的结构 ...
- 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- 详解promise、async和await的执行顺序
说明: 本文摘自 详解 promise.async和await的执行顺序. 1.题目和答案 一道题题目:下面这段promise.async和await代码,请问控制台打印的顺序? async func ...
- php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
最新文章
- C#调用WebService出现“基础连接已经关闭:接收时发生错误”错误
- 军转干部计算机测试题,2015福建军转干考试计算机基础知识:计算机网络
- ios开发之 -- 自动轮播图创建
- I2C总线之(一)---概述
- 数据库---初识sql语句
- python特征工程插件_python特征工程
- java 基础第一季
- 物联网os_用于物联网的FireFox OS,NextCloud公告以及更多新闻
- STM32F103单片机J-TAG引脚功能关闭方法
- 51Nod-1126 求递推序列的第N项【递推序列+模除】
- C# winform post 请求指定 url
- Pytorch使用tensorboardX可视化
- Unity3D Slider控件(滑动条)
- weblogic部署springboot项目
- 上海财经应用统计考python_20上财应用统计415分经验帖(初试第一)
- JAVA实现经典游戏俄罗斯方块
- 关于微信公众号自动回复文本、图片以及图文
- PE结构-空白区手动添加任意代码(附实例代码)
- mysql属于dbms还是dbs_DB、DBMS和DBS三者之间有什么关系
- 灵动微 MM32 多路ADC-DMA配置
热门文章
- 【Kafka】kafka 创建 topic的时候 Replication factor 参数理解
- 【Java】5 个刁钻的 String 面试题
- 【Mac】mac安装redis客户端 Error: Cask ‘rdm‘ is unavailable: No Cask with this name exist
- alibaba fastJson框架快速解析复杂有重复性质的json
- 学习云计算有什么用?企业怎么才能“上云”?
- 基本功:SQL 多表联合查询的几种方式
- 修改定时任务不重启项目,SpringBoot如何实现?
- 从Nacos客户端视角来分析一下配置中心实现原理
- jsp九大内置对象和四种属性范围介绍
- JSONOBject的fluentPut(key,value)方法:可链式设置元素