详解canvas绘制多张图的排列顺序问题


Posted in HTML / CSS onJanuary 21, 2019

在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,排在数组前面的图片不一定能先被load然后绘制,就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重定向的图片尤为明显),我的解决办法是:先全部画出来再排序再append到需要的节点里去。

<div id="myContent"></div>
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并绘制,如果重定向域名后会加大这种现象,采用了绘制完再排序的做法。如果有谁想到更好的办法,欢迎指正批评。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 #HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 #HTML / CSS
You might like
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
关于this和self的使用说明
2010/08/01 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
postman和python mock测试过程图解
2020/02/22 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python 字典中的所有方法及用法
2020/06/10 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
什么是servlet
2012/05/08 面试题
幼儿园门卫岗位职责
2014/02/14 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
实习协议书
2015/01/27 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
优化Mysql查询的示例
2022/04/26 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python