问答详情
源自:4-2 Canvas时钟特效

canvas时钟内容点点是一条直线?


var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

ctx.font=18*rem+'px Aprial';

ctx.textAlign='center';

ctx.textBaseline='middle';

hourNumbers.forEach(function(number,i){

var rad=2*Math.PI/12*i;

var x=Math.cos(rad)*(r-30*rem);

var y=Math.sin(rad)*(r-30*rem);

ctx.fillText(number,x,y);

});

for(var i = 0;i < 60 ;i++){

var rad=2*Math.PI/60*i;

var x=Math.cos(rad)*(r-18*rem);

var y=Math.cos(rad)*(r-18*rem);

ctx.beginPath();

if(i%5==0)

{ctx.fillStyle='#000';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

ctx.fill();

}

else{

ctx.fillStyle='#ccc';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

ctx.fill();

}

ctx.fill();

}

}


提问者:慕莱坞8299253 2017-11-16 09:39

个回答

  • Ma91c
    2017-11-22 18:35:07

    for(var i = 0;i < 60 ;i++){

    var rad=2*Math.PI/60*i;

    var x=Math.cos(rad)*(r-18*rem);

    var y=Math.cos(rad)*(r-18*rem);

    ctx.beginPath();

    ------------ 分割线 -------------

    上面是画刻度点的部分,y = Math.sin(rad) * (r - 18 * rem); 而不是cos