canvas 平移效果

功能：一个矩形从左往右平移，到边界就停止移动，(3s内到边界)

    let canvas=document.getElementById('canvas');
    canvas.height=300; // 初始化canvas的高度
    canvas.width=300; // 初始化canvas的宽度
    var context=canvas.getContext('2d');
    let num = 0 //  这里累计平移了多少
    let time= null
    context.fillRect(num,10,100,100) // 默认画出一个矩形
    time = setInterval(()=>{
        // 开始移动
        num += (canvas.width - 100) / 3  
       // 平移量 根据   （ 画布的宽  -  矩形的框 ）/  需要平移的时间 
        context.fillRect(num,10,100,100) // 平移是通过改变它"画的起始点"决定(x,y,width,height)
        context.clearRect(0,10,num,100) // 这是做清除平移的"痕迹"
        if (num >= canvas.width - 100){
            return clearInterval(time)
        }
    },1000)

---

详细解释：（ 画布的宽 - 矩形的框 ）/ 需要平移的时间

300.jpg

由图可见，矩形要到边界就必须平移200px，因为要在3s内到达，所有可以平均每秒移动 (canvas.width - 100) / 3 个px，此时再判断平移总量是否 >= 200 就完成了