canvas实现画图,canvas拼接图片
最近在做项目的时候遇到照片拼图的功能，在这里分享一下我封装的画布拼图功能。可能是代码写的不好。有什么问题或者有更好的方法可以私信我聊天或者评论。谢谢大家！
实现思路其实挺简单的，主要是通过服务器获取图像链接，图像宽度，图像高度，然后用简单的递归实现(注意移动端需要采用2倍的比例，否则图像会模糊)。
/** *画布绘图数据* @ param { Object[]}选项。photodata * @ param { string }选项。photodata[].表示"光":光化学照片的链接地址* @ param { number }选项。photodata[].宽度-照片的宽度* @ param { number }选项。photodata[].高度-照片的高度* @ param { Object[]}选项。word data * @ param { string }选项。word数据[].颜色-文字的颜色* @ param { number }选项。word数据[].字体大小-文字的大小* @ param { string }选项。word数据[].字体重量-文字的粗细* @ param { number }选项。word数据[].左边文字的左边距* @ param { number }选项。word数据[].顶部-文字的上边距* @ param { string }选项。word数据[].单词-文字的内容* @ param { Object[]}选项。icon data * @ param { string }选项。图标数据[].照片图标的链接地址* @ param { number }选项。图标数据[].左侧图标的左边距* @ param { number }选项。图标数据[].顶部图标的上边距* @ param { number }选项。图标数据[].宽度-图标的宽度* @ param { number }选项。图标数据[].高度图标的高度* */函数canvasDraw(选项){ var canvas=document。createelement( canvas )，ctx=canvas.getContext(2d )，client width=document。documentelement。客户端宽度，canvasHeight=0，距离=0，photoCount=0，图标计数=0；//画布中手机上一倍绘图会模糊，需采用两倍，个人电脑端不会。
clientWidth=clientWidth 480？480 * 2:客户端宽度* 2；选项。照片数据。foreach(function(item，index，picArr){ if(！索引){ item。距离=0；} else if(索引){ distance=math。地板(客户宽度/选项。照片数据[索引-1].宽度*选项。照片数据[索引-1].高度)项目.距离=距离；} canvasHeight=math。地板(客户宽度/项目。宽度*项目。身高)；项目。img身高=数学。地板(客户宽度/项目。宽度*项目。身高)；})控制台。日志(选项。如果(CTX){画布。宽度=客户端宽度；画布。高度=canvasHeight客户端宽度/4 * 2 CTX。填充样式= # fff CTX。fill rect(0，0，canvas.width，canvas.height) //绘制图片文字if(选项。单词数据。长度){ option。单词数据。foreach(函数(项，索引){ CTX。填充样式=项目。颜色；CTX。font= normal normal 项目。字体粗细 计算(项。字号) px微软雅黑；CTX . textalign= left CTX . fill text(item . word，calculate(item.left)，canvasHeight calculate(item。top))；}) } //按比例计算不同手机的百分比间距函数calculate(num){ return math。地板(客户端宽度*数量/750)}绘制照片(照片0 )函数draw photo(photoDom){ var photoDom=new Image()；摄影圈。设置属性(“交叉起源”、“匿名”)；摄影圈。src=选项。照片数.照片；摄影圈。onload=函数(){ CTX。绘制图像(photoDom，0，option.photoData[photoCount]).距离，客户端宽度，选项。照片数据[照片计数]。imgHeight)；照相计数；if(照片计数==选项。照片数据。长度){绘制图标(图标0 )函数draw icon(iconDom){ var iconDom=new Image()；偶像世界。设置属性(“交叉起源”、“匿名”)；偶像世界。src=选项。图标数据[图标计数].图标；偶像世界。onload=函数(){ CTX。绘制图像(iconDom，计算(选项。图标数据[图标计数].左)，canvasHeight计算(选项。图标数据[图标计数]。top)、计算(选项。图标数据[图标计数].宽度)、计算(选项。图标数据[图标计数].height))图标计数；if(图标计数==选项。图标数据。长度){ var imageURL=canvas。toda taurl( image/JPEG )文档。getelementsbyclassname( share img )[0].setAttribute(src ，imageURL) //将闭包引用清除，释放内存；draw photo=null } else { draw icon( icon icon count)} } } else { draw photo( photo photo count)} } else { console。日志(不支持canvas) } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。