名片生成这个小案例有以下几个地方不是很清楚麻烦老师解惑
来源: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循环,一次产生许多小球,将小球的各个属性值放进一个对象中,属性值可以使用随机数来产生,然后绘制小球即可。参考:

自己可以测试理解一下。
祝学习愉快!
相似问题