介绍/* *
,,,,*,帆布绘图数据
,,,,*,@param {Object []} option.photoData
,,,,*,@param {字符串},option.photoData [] .photo 作用;照片的链接地址
,,,,*,@param {号码},option.photoData [] .width 作用;,照片的宽度
,,,,*,@param {号码},option.photoData [] .height 作用;,照片的高度
,,,,*,@param {Object []} option.wordData
,,,,*,@param {字符串},option.wordData [] .color 作用;文字的颜色
,,,,*,@param {号码},option.wordData [] .fontSize 作用;文字的大小
,,,,*,@param {字符串},option.wordData [] .fontWeight 作用;,文字的粗细
,,,,*,@param {号码},option.wordData [] .left 作用;文字的左边距
,,,,*,@param {号码},option.wordData [] .top 作用;,文字的上边距
,,,,*,@param {字符串},option.wordData [] .word 作用;,文字的内容
,,,,*,@param {Object []} option.iconData
,,,,*,@param {字符串},option.iconData [] .photo 作用;图标的链接地址
,,,,*,@param {号码},option.iconData [] .left 作用;,图标的左边距
,,,,*,@param {号码},option.iconData [] .top 作用;,图标的上边距
,,,,*,@param {号码},option.iconData [] .width 作用;,图标的宽度
,,,,*,@param {号码},option.iconData [] .height 作用;,图标的高度
,,,,
,,*/function canvasDraw(选项){
,,,,,,,var canvas =, document.createElement(& # 39;帆布# 39;),
,,,,,,,,,,,ctx =, canvas.getContext (& # 39; 2 d # 39;),
,,,,,,,,,,,clientWidth =, document.documentElement.clientWidth,
,,,,,,,,,,,canvasHeight =, 0,
,,,,,,,,,,,distance =, 0,
,,,,,,,,,,,photoCount =, 0,
,,,,,,,,,,,iconCount =, 0;
,,,,,,,//,画布中手机上一倍绘图会模糊,需采用两倍,pc端不会只,,,
,,,,,,,clientWidth =, clientWidth 祝辞,480 ?,480,*,2,:,clientWidth *, 2,,
,,,,,,,option.photoData.forEach(函数(项目、索引picArr) {
,,,,,,,,,,,if (指数),{
,,,,,,,,,,,,,,,item.distance =, 0;
,,,,,,,,,,,}else 如果(指数){
,,,,,,,,,,,,,,,distance +=, Math.floor(时间/clientWidth option.photoData [index 作用;1].width *, option.photoData [index 作用;1].height)
,,,,,,,,,,,,,,,item.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
,,,,,,,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
使用帆布怎么实现一个拼图功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
实现的思路其实挺简单的,主要是通过服务端获取图片链接,图片宽度,图片高度,然后利用简单的递归实现就行了(注意移动端需要采用2倍数的比例,否则会出现图片模糊的问题)
