当前位置： 移动技术网 > IT编程>网页制作>Html5 > canvas拼图功能实现代码示例

canvas拼图功能实现代码示例

2019年07月25日  | 移动技术网IT编程  | 我要评论

万家灯火刁文鲳,狗狗在吃便便的时候不感觉臭吗?,康筱婕

最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的canvas拼图功能，可能代码写的不好，如果有疑问或者是有更好的方法的，可以私聊我，或者是评论指出，感谢各位

实现的思路其实挺简单的，主要是通过服务端获取图片链接，图片宽度，图片高度，然后利用简单的递归实现就行了（注意移动端需要采用2倍数的比例，否则会出现图片模糊的问题）

/**

     * canvas绘图数据
     * @param {object[]} option.photodata
     * @param {string} option.photodata[].photo - 照片的链接地址
     * @param {number} option.photodata[].width -  照片的宽度
     * @param {number} option.photodata[].height -  照片的高度
     * @param {object[]} option.worddata
     * @param {string} option.worddata[].color - 文字的颜色
     * @param {number} option.worddata[].fontsize - 文字的大小
     * @param {string} option.worddata[].fontweight -  文字的粗细
     * @param {number} option.worddata[].left - 文字的左边距
     * @param {number} option.worddata[].top -  文字的上边距
     * @param {string} option.worddata[].word -  文字的内容
     * @param {object[]} option.icondata
     * @param {string} option.icondata[].photo - icon的链接地址
     * @param {number} option.icondata[].left -  icon的左边距
     * @param {number} option.icondata[].top -  icon的上边距
     * @param {number} option.icondata[].width -  icon的宽度
     * @param {number} option.icondata[].height -  icon的高度
     *
    */
function canvasdraw(option){

        var canvas = document.createelement('canvas'),
            ctx = canvas.getcontext('2d'),
            clientwidth = document.documentelement.clientwidth,
            canvasheight = 0,
            distance = 0,
            photocount = 0,
            iconcount = 0;

        // canvas中手机上一倍绘图会模糊，需采用两倍，pc端不会。    
        clientwidth = clientwidth > 480? 480 * 2 : clientwidth * 2; 

        option.photodata.foreach(function(item,index,picarr){
            if (!index) {
                item.distance = 0;
            }else if(index){
                distance += math.floor(clientwidth / option.photodata[index - 1].width * option.photodata[index - 1].height)
                item.distance = distance;
            }
            canvasheight += math.floor(clientwidth / item.width * item.height);
            item.imgheight = math.floor(clientwidth / item.width * item.height);
        })        

        console.log(option.photodata)

        if (ctx) {
            canvas.width = clientwidth;
            canvas.height  = canvasheight + clientwidth / 4 * 2
        
            ctx.fillstyle = '#fff'
            ctx.fillrect(0, 0, canvas.width, canvas.height)

            // 绘制图片文字
            if(option.worddata.length){
                option.worddata.foreach(function(item,index){
                    ctx.fillstyle = item.color;
                    ctx.font = 'normal normal ' + item.fontweight + ' ' + calculate(item.fontsize) + 'px microsoft yahei';
                    ctx.textalign = 'left';
                    ctx.filltext(item.word, calculate(item.left), canvasheight + calculate(item.top));    
                })
            }

            //按比例计算不同手机的百分比间距
            function calculate(num){
                return math.floor(clientwidth * num / 750)
            }

            drawphoto('photo0')

            function drawphoto(photodom){
                var photodom = new image();    
                photodom.setattribute('crossorigin', 'anonymous');
                photodom.src = option.photodata[photocount].photo;

                photodom.onload = function(){
                    ctx.drawimage(photodom, 0, option.photodata[photocount].distance, clientwidth, option.photodata[photocount].imgheight);
                    photocount++;

                    if (photocount == option.photodata.length) {

                        drawicon('icon0')

                        function drawicon(icondom){
                            var icondom = new image();    
                            icondom.setattribute('crossorigin', 'anonymous');
                            icondom.src = option.icondata[iconcount].icon;

                            icondom.onload = function(){
                                ctx.drawimage(icondom, calculate(option.icondata[iconcount].left), canvasheight + calculate(option.icondata[iconcount].top), calculate(option.icondata[iconcount].width), calculate(option.icondata[iconcount].height))
                                iconcount++;

                                if (iconcount == option.icondata.length) {
                                    var imageurl = canvas.todataurl("image/jpeg")
                                    document.getelementsbyclassname('shareimg')[0].setattribute('src', imageurl)

                                    //将闭包引用清除，释放内存;
                                    drawphoto = null;

                                }else{
                                    drawicon('icon' + iconcount)
                                }
                            }    
                        }                                 
                    }else{
                        drawphoto('photo'+ photocount)
                        
                    }    
                }                                                
            }

        }else{
            console.log('不支持canvas')
        }
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网