我正在努力使用请求动画框架创建线条绘制动画。当我使用 setInterval 函数时,一切正常,但我在某处读到请求 ani 帧更加优化,并且间隔中的所有函数都应该以这种方式编写。
所以这是我的代码:
var topMinX = 3; 变量 topMaxX = 75; var topMinY = 2;
变量 topMaxY = 2; 变量最小值;变量最大值;
//request animation frame
(function animate(){
var t = setTimeout(function(){
requestAnimFrame(animate);
var d = render(topMinX,topMaxX,topMinY,topMaxY,true);
},20);
})();
function render(xMin,xMax,yMin,yMax,direction){
if(direction){
min = xMin;
max = xMax
}else{
min = yMin;
max = yMax;
}
if(min<max){
context.beginPath();
if(direction){
context.moveTo(xMin,yMin);
xMin = xMin+2;
alert(xMin);
context.lineTo(xMin,yMax);
}else{
context.moveTo(xMin,yMin);
yMin = yMin+2;
context.lineTo(xMax,yMin);
}
context.lineWidth = 4;
context.stroke();
}
}
问题是 xMin 值不会增加。它总是会警告 5,我希望它在每次迭代中增加 2。基本上我只想画一个正方形,所以我不需要任何对角线移动,这就是我添加方向参数的原因。
我是画布新手并请求 ani 框架,所以任何帮助都会更有用。