怎么通过html5实现拼图功能效果

这篇“怎么通过html5实现拼图功能效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么通过html5实现拼图功能效果”文章吧。

实现的思路其实挺简单的，主要是通过服务端获取图片链接，图片宽度，图片高度，然后利用简单的递归实现就行了（注意移动端需要采用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')         }     }

以上就是关于“怎么通过html5实现拼图功能效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。