有人讀得懂這段code嗎..?可以解釋解我聽嗎?

html5 rotate translate

wai123999 2016-08-17 23:28:02 ‧ 2772 瀏覽

分享至

這是w3school canvas 時鐘顯示數字的code

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
		---以下3句看不懂...為什麼轉完又轉回來呢?"?--
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

求解答T^T

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

fillano

iT邦超人 1 級 ‧ 2016-08-18 00:48:18

最佳解答

註解在Javascript程式碼中，請參考。

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

海綿寶寶 iT邦大神 1 級 ‧ 2016-08-18 08:43:22 檢舉

半夜睡不著覺，把心情哼成歌
只好到屋頂找另一個夢境...

fillano iT邦超人 1 級 ‧ 2016-08-18 09:21:42 檢舉

想一想，還是解釋詳細一點：

rotate做的事情是旋轉canvas，座標系統會跟著轉
所以....translate改變座標位置時，座標系統是旋轉過的
以畫出1為例。一開始的位置就是圓心，這兩個搭起來，就變成座標順時針轉30度，然後沿著旋轉過的y軸往上移到圓的半徑乘以0.85的位置，然後把座標轉正，畫數字，在把上述過程倒著走，位置移回圓心，座標系統也轉正，然後下一次是60度、90度....到12為止（12*30 = 360）