名片生成这个小案例有以下几个地方不是很清楚麻烦老师解惑
来源:9-3 完成案例动画部分
慕后端8593059
2018-12-23 21:15:34
第一个地方: jobWidth=cardCtx.measureText(job).width; if(maxWidth<nameWidth){ maxWidth=nameWidth; } if(maxWidth<addressWidth){ maxWidth=addressWidth; } if(maxWidth<jobWidth){ maxWidth=jobWidth; } 第二个位置: //计算口号的位置 var solganWidth; solganWidth=cardCtx.measureText(slogan).width; var offset=(cardCtx.canvas.width-115-maxWidth-solganWidth)/2; cardCtx.fillText(slogan,115+maxWidth+offset,50); 第三处: //绘制下落的圆 for(var i=0;i<=10;i++){ if(!circles[i]){ circles[i]={}; circles[i].radius=Math.floor(Math.random()*5)+1;//生成随机数 圆半径 circles[i].y=-circles[i].radius-Math.floor(Math.random()*10)-5;//生成随机数 圆x坐标 circles[i].x=i*60+Math.floor(Math.random()*10)-5;//生成随机数 圆y坐标 circles[i].vy=Math.floor(Math.random()*5)+1; } animCtx.beginPath(); animCtx.arc(circles[i].x,circles[i].y,circles[i].radius,0,Math.PI*2); animCtx.fillStyle="rgba(255,255,255,0.5)"; animCtx.fill(); circles[i].y=circles[i].y+circles[i].vy; if(circles[i].y>animCtx.canvas.height+circles[i].radius*2){ circles[i]=undefined; } }
1回答
好帮手慕星星
2018-12-24
同学你好,关于你问的问题:
1、第一段代码是将三行文字长度的最大值保存给maxlength变量,从而进行右侧口号的位置计算。
2、第二段代码是计算口号的位置:
3、绘制圆形是使用for循环,一次产生许多小球,将小球的各个属性值放进一个对象中,属性值可以使用随机数来产生,然后绘制小球即可。参考:
自己可以测试理解一下。
祝学习愉快!
相似问题