接下来是drawTime函数，它一共有四个参数（context,theArc,theLength,color="#000")，context一眼看穿是画布的上下文，theArc则是我们要旋转画布的角度，theLength代表指针的长度，color则是指针的颜色。
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函数，要是没有它，你的时钟会被密密麻麻的秒针占领的，关爱密集恐惧症患者，我们人人有责
function clearTime(context){ //我们开始一条新的子路径，然后描绘一个充斥着好看蓝色的圆，把我们之前画的指针都遮盖住，相当于清除了一次表盘 context.beginPath(); context.arc(0,0,80,0,2*Math.PI,false); context.fillStyle = "#4ba2cf"; context.fill(); //很不幸，我们的蓝胖子也被误伤了，所以再召唤它一次吧，决定就是你啦，皮卡丘（？咦） var image = new Image(); image.src = "2.png"; //这个坐标和第一次加载的坐标不同，因为我们修改了变换矩阵，还记得吗？所以，它们的坐标应该是互补的 context.drawImage(image,-75,-75,150,150); }
嗯啦，ok，现在是真的到此为止啦，差不多该去吃饭咯~各位可爱的程序猿们要记得吃饭哦~
您可能感兴趣的文章: