如何通過html5實(shí)現(xiàn)拼圖功能效果？canvas實(shí)現(xiàn)拼圖案例分享！

不知道各位在空閑的時(shí)間都在干嘛。對(duì)于小編來說我會(huì)比較喜歡在空閑的時(shí)間來玩玩拼圖的游戲，對(duì)于這個(gè)方面的喜歡。今天我們就來講講有關(guān)于：“如何通過html5實(shí)現(xiàn)拼圖功能效果？”這個(gè)問題吧。

實(shí)現(xiàn)的思路其實(shí)挺簡單的，主要是通過服務(wù)端獲取圖片鏈接，圖片寬度，圖片高度，然后利用簡單的遞歸實(shí)現(xiàn)就行了（注意移動(dòng)端需要采用2倍數(shù)的比例，否則會(huì)出現(xiàn)圖片模糊的問題）

/**

     * canvas繪圖數(shù)據(jù)
     * @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 -  文字的粗細(xì)
     * @param {number} option.wordData[].left - 文字的左邊距
     * @param {number} option.wordData[].top -  文字的上邊距
     * @param {string} option.wordData[].word -  文字的內(nèi)容
     * @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中手機(jī)上一倍繪圖會(huì)模糊，需采用兩倍，pc端不會(huì)。    
        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));    
                })
            }

            //按比例計(jì)算不同手機(jī)的百分比間距
            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)

                                    //將閉包引用清除，釋放內(nèi)存;
                                    drawPhoto = null;

                                }else{
                                    drawIcon('icon' + iconCount)
                                }
                            }    
                        }                                 
                    }else{
                        drawPhoto('photo'+ photoCount)
                        
                    }    
                }                                                
            }

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

今天關(guān)于“如何通過html5實(shí)現(xiàn)拼圖功能效果？”這方面的內(nèi)容分享就這些啦！如果對(duì)于前端這方面有所喜歡的小伙伴們都可以在W3Cschool中進(jìn)行一個(gè)規(guī)范系統(tǒng)性的學(xué)習(xí)和了解。希望今天的分享對(duì)大家學(xué)習(xí)有所幫助！