照着敲一遍😀

应该是手写的，然后通过剪辑把这个过程剪掉， 所以看上出像突然出现，也可能是事先准备好了demo，复制粘贴过去，然后也是剪掉了这个过程。

那些代码都是一些无关紧要的代码，比如设置的style，这个是css样式设置相关，不是这门课的重点，如果不剪辑，一个是会拉长视频时长，一个是容易分散关注点。

作者做了画布底部的碰撞检测，当小球的坐标达到画布底部时，则会让小球上下方向速度值变为负数，即出现短暂的弹起效果。

看图哈，这里除了10000，多了个0

写成一个函数来处理或者一个类也行，

canvas.heihgt=WINDOW_HEIGHT;      前面的height写错了 改成canvas.height=WINDOW_HEIGHT; 

是的，这个单引号去掉后效果还是和原来一样

把你函数draw（）里面的for下面的{}删了，不带{}只执行cxt.lineTo(place.p[i].x,place.p[i].y);

var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=768;

var RADIUS=8;

var MARGIN_TOP=60;

var MARGIN_LEFT=30;

const endTime = new Date(2014,6,11,18,47,52);

var curShowTimeSeconds=0;

var balls=[];

const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload=function(){

    //   /** @type {HTMLCanvasElement} */ /

    var canvas=document.getElementById('canvas');

    var context=canvas.getContext('2d');

    canvas.width=WINDOW_WIDTH;

    canvas.height=WINDOW_HEIGHT;

    curShowTimeSeconds=getCurrentShowTimeSeconds()

    // render(context)

    setInterval(

        function(){

            render(context)

            update()

        },50

    );

}

function getCurrentShowTimeSeconds(){

    //  /** @type {HTMLCanvasElement} */ 

    var curTime=new Date();

    var ret=endTime.getTime()-curTime.getTime();

        ret= Math.round(ret/1000)

    return ret >= 0 ? ret : 0;

}

function update(){

    //  /** @type {HTMLCanvasElement} */ 

    var nextShowTimeSeconds=getCurrentShowTimeSeconds();

    var nextHours=parseInt( nextShowTimeSeconds/3600 );

    var nextMinutes=parseInt( (nextShowTimeSeconds-nextHours*3600)/60 );

    var nextSeconds=nextShowTimeSeconds%60;

    var curHours=parseInt( curShowTimeSeconds/3600 );

    var curMinutes=parseInt( (curShowTimeSeconds-curHours*3600)/60 );

    var curSeconds=curShowTimeSeconds%60;

    if(nextSeconds !=curSeconds){

        curShowTimeSeconds=nextShowTimeSeconds;

    }

}

function render(cxt) {

    //  /** @type {HTMLCanvasElement} */ //获得canvas语法提示

    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

    var hours=parseInt( curShowTimeSeconds/3600 );

    var minutes=parseInt( (curShowTimeSeconds-hours*3600)/60 );

    var seconds=curShowTimeSeconds%60;

    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt)

    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt)

    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt)

    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt)

    renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt)

    renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt)

    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt)

    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt)

}

function renderDigit(x,y,num,cxt){

        // /** @type {HTMLCanvasElement} */ //获得canvas语法提示

    cxt.fillStyle="rgb(0,102,153)";

    for(var i=0;i<digit[num].length;i++)

        for(var j=0;j<digit[num][i].length;j++)

         if(digit[num][i][j]==1){

             cxt.beginPath();

             cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);

             cxt.closePath();

             cxt.fill()

         }

}

直接用浏览器打开html就行

太感谢了~

j代表点阵X方向第几格，x代表这个数字的起始位置，计算到每个点阵就是x + j*2*(R+1)，到点阵中的圆心就要加多个点阵半径

函数名写错了。

有没有精确度相关的计算出差的误差呢

1. 将 "WINDIW_HEIGHT = document.body.clientHeight;" 改成   "WINDIW_HEIGHT += document.body.clientHeight;" 

   

2. 或 改成 WINDIW_HEIGHT = document.documentElement.clientHeight ;

   
   

https://www.w3school.com.cn/html5/canvas_filltext.asp
使用 fillText()，在画布上写文本 "Hello world!" 和 "w3school.com.cn"：

这个地方应该  cxt.lineTo(piece.p[i].x,piece.p[i].y);

加油干

我跟你一模一样，原因就是

curShowTimeSeconds = getCurrentShowTimeSeconds();

render(context);

这两个方法的顺序写反了导致render里面的curShowTimeSeconds是错的

"WINDIW_HEIGHT = document.body.clientHeight;" 这行代码问题,要不 "WINDIW_HEIGHT += document.body.clientHeight;" 不然改成 "WINDIW_HEIGHT = document.documentElement.clientHeight ;"

拼写有没有问题，函数传参的时候注意名称。

写在style里的样式影响里，style的width和height有px，window.onload里设置的宽高有加载顺序问题，最好写在标签上width='1024' height='768'。个人见解，有不同理解的可以多交流交流。

在你document获取canvas节点的方法上面  加上备注：

/** @type {HTMLCanvasElement} */

最后老师优化了这块的逻辑。 当小球跳出canvas宽度的时候。这个小球就不会被绘制了。 所以也就等于消失了。 不占用内存了。

有没有添加摩擦系数，在每次碰撞后，速度取反，再乘以一个0至1的系数就可以了。

贴代码啊，同学，不看代码很难精准定位问题。

看一下你的WINDOW_WIDTH和WINDOW_HEIGHT是否有值