这篇“怎么通过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的高度**/functioncanvasDraw(option){varcanvas=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;}elseif(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*2ctx.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='normalnormal'+item.fontWeight+''+calculate(item.fontSize)+'pxMicrosoftYaHei';ctx.textAlign='left';ctx.fillText(item.word,calculate(item.left),canvasHeight+calculate(item.top));})}//按比例计算不同手机的百分比间距functioncalculate(num){returnMath.floor(clientWidth*num/750)}drawPhoto('photo0')functiondrawPhoto(photoDom){varphotoDom=newImage();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')functiondrawIcon(iconDom){variconDom=newImage();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){varimageURL=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实现拼图功能效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。