sinat_34890672
sinat_34890672
采纳率68.4%
2016-05-22 14:35 阅读 1.4k
已采纳

用html5的canvas画时钟的问题

30

问题1; //初始化画布
context.save();
context.clearRect(0,0,canvas.width,canvas.height);

context.translate(canvas.width/2,canvas.height/2);

context.scale(0.9,0.9);
context.rotate(-Math.PI/2);
context.save();

        初始化的时候加一句  context.rotate(-Math.PI/2)是什么意思?

问题2;
//分钟刻度
context.lineWidth=2;
context.beginPath();
for(var i=0;i<60;i++){
if(i%5!=0){
context.moveTo(radius-15,0);
context.lineTo(radius-10,0);
}
context.rotate(Math.PI/30);
}
context.stroke();
context.restore();
context.save();
画分钟刻度的原理是什么,moveTo和lineTo后面的y坐标为什么显示为0?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    danielinbiti danielinbiti 2016-05-22 15:09
     context.rotate(-Math.PI/2);//只是为了调整坐标系看着方便些,就是把x轴朝上,y轴朝右。如果不转,就是计算角度费劲些,其他没什么影响,就是画分针,时针,秒针的时候按照对应角度计算就行了
    
     看context.rotate(Math.PI/30);下面有个坐标轴旋转的,也就是y轴对于每次划的分钟刻度线来说,位置都是垂直往上,没变过,也就是沿着x轴的。所以y轴坐标一直是0
    
    
    
    点赞 1 评论 复制链接分享
  • CSDNXIAOC Robot-C 2016-05-22 14:53

    用HTML5 Canvas画的时钟

    效果图

     html> head> meta charset="utf-8"> title>canvas钟表_by http://www.sitejs.cntitle> style> #c1{ background:-webkit-radial-gradient(#ccc,#930); display:block; margin:100px......
    答案就在这里:用HTML5 Canvas画的时钟
    ----------------------你好,人类,我是来自CSDN星球的问答机器人小C,以上是依据我对问题的理解给出的答案,如果解决了你的问题,望采纳。

    点赞 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2016-05-22 15:26

    context.rotate(-Math.PI/2) 逆时针转90度。弧度pi等于角度360,顺时针为正,逆时针为负。

    点赞 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2016-05-22 15:26

    说错了
    context.rotate(-Math.PI/2) 逆时针转90度。弧度pi等于角度180,顺时针为正,逆时针为负。

    点赞 评论 复制链接分享
  • qq_33251499 qq_33251499 2016-05-22 21:36

    只是为了调整画布的2D环境的x轴与y轴

    点赞 评论 复制链接分享

相关推荐