名片生成这个小案例有以下几个地方不是很清楚麻烦老师解惑

来源: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、第二段代码是计算口号的位置:

http://img.mukewang.com/climg/5c205dc10001c82b08540441.jpg

3、绘制圆形是使用for循环,一次产生许多小球,将小球的各个属性值放进一个对象中,属性值可以使用随机数来产生,然后绘制小球即可。参考:

http://img.mukewang.com/climg/5c2058890001788515080781.jpg

自己可以测试理解一下。

祝学习愉快!

0

0 学习 · 4826 问题

查看课程