HTML5技术

用canvas画“哆啦A梦”时钟 - 玉菲莎(4)

字号+ 作者:H5之家 来源:H5之家 2016-07-28 12:00 我要评论( )

function drawTime(context,theArc,theLength,color="#000" ){ // 保存当前的画布环境,和restore方法配合使用能够恢复画布上下文 context.save(); // 旋转画布,rotate传入的参数代表旋转的弧度 context.rotate(th

function drawTime(context,theArc,theLength,color="#000"){ //保存当前的画布环境,和restore方法配合使用能够恢复画布上下文 context.save(); //旋转画布,rotate传入的参数代表旋转的弧度 context.rotate(theArc); //开始一条新的子路径,我们开始画指针啦 context.beginPath(); //将开始点移动到(0,0) context.moveTo(0,0); //画一条到(theLength,0)的路径 context.lineTo(theLength,0); //用指定的color颜色画这条路径 context.strokeStyle = color; //路径的宽度为2 context.lineWidth = 2; //路径是不可见的,如果要看到路径,需要用stroke来描线,而如何描这条线,可以由我们以上用到的几个属性来定义 context.stroke(); //恢复上下文 context.restore(); }

虽然接近尾声啦,但是还有一个很重要的clearTime函数,要是没有它,你的时钟会被密密麻麻的秒针占领的,关爱密集恐惧症患者,我们人人有责

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas知识点 - H.U.C-王子

    canvas知识点 - H.U.C-王子

    2017-04-16 10:02

  • canvas实现黑客帝国矩形阵 - 风雨后见彩虹

    canvas实现黑客帝国矩形阵 - 风雨后见彩虹

    2017-03-30 09:00

  • canvas画直角坐标系 - shbwh-tswq

    canvas画直角坐标系 - shbwh-tswq

    2017-03-18 10:02

  • 列表总结Canvas和SVG的区别 - 妙音天女

    列表总结Canvas和SVG的区别 - 妙音天女

    2017-03-17 10:00

网友点评
"