canvas拼图功能实现代码示例

大佬教程收集整理的这篇文章主要介绍了canvas拼图功能实现代码示例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的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,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,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') } }

大佬总结

以上是大佬教程为你收集整理的canvas拼图功能实现代码示例全部内容，希望文章能够帮你解决canvas拼图功能实现代码示例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。