当前位置：首页 > news >正文

JS绘制叠加图片

news 2025/8/8 11:00:12

米游社活动要求：合影卡 + 自选背景(含角色瓦雷莎)。

合影卡

自选背景

难点

1.闭包

2.循环 & 判断所有图片加载完成

3.img增加wh字段定为canvas高宽

js获取标签元素data-*属性值的4种方法_javascript技巧_脚本之家

img.setAttribute('data-wh', 'wh');

if (img.dataset.wh == 'wh') { }

代码

<html>
<head>
<title>叠图</title>
<style>
h1 { text-align:center; }
a { text-decoration:none; }
p { text-indent:2em; }
</style>
</head>
<body>
<textarea id="textarea">
瓦雷莎.jpg
合影卡.png;wh</textarea> <button id="button_draw">绘图</button><br><br>
<canvas id="canvas"></canvas>
<script>
var ctx = canvas.getContext('2d');
var list = new Array();

function load() {
    //var w=0, h=0;
    var s = textarea.value.trim();
    //console.log(s);
    var sl = s.split('\n');
    //console.log(sl);
    list.length = 0;

    for (i=0; i<sl.length; i++) {        
        var img = new Image();
        var sl1 = sl[i].split(';');        
        img.src = sl1[0];
        if (sl1.length > 0)
            if (sl1[1] == 'wh')
                img.setAttribute('data-wh', 'wh');
        console.log(img);        
        list.push(img);        
        (function(img, list){
            img.onload = function(){
                console.log(img, img.dataset.wh, img.dataset.wh == 'wh', img.width, img.height);
                if (img.dataset.wh == 'wh') {
                    canvas.width = img.width;
                    canvas.height = img.height;
                }
                var b = true;
                for (j=0; j<list.length; j++) {                    
                    b = b & list[j].complete;
                    //console.log(list[j], list[j].complete, b);
                }
                if (b) {
                    draw();
                }
            }
        })(img, list);
    }
}

function draw() {
    for (i=0; i<list.length; i++) {        
        ctx.drawImage(list[i],0,0);
    }
}

button_draw.onclick = function() {
    load();
}
</script>
</body>
</html>

效果图

查看全文

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dtcms.com/a/100542.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！