iT邦幫忙

0

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

這是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

1 個回答

5
fillano
iT邦超人 1 級 ‧ 2016-08-18 00:48:18
最佳解答
看更多先前的回應...收起先前的回應...

半夜睡不著覺,把心情哼成歌
只好到屋頂找另一個夢境...
/images/emoticon/emoticon81.gif

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

想一想,還是解釋詳細一點:

  1. rotate做的事情是旋轉canvas,座標系統會跟著轉
  2. 所以....translate改變座標位置時,座標系統是旋轉過
  3. 以畫出1為例。一開始的位置就是圓心,這兩個搭起來,就變成座標順時針轉30度,然後沿著旋轉過的y軸往上移到圓的半徑乘以0.85的位置,然後把座標轉正,畫數字,在把上述過程倒著走,位置移回圓心,座標系統也轉正,然後下一次是60度、90度....到12為止(12*30 = 360)
賽門 iT邦超人 1 級 ‧ 2016-08-18 11:35:18 檢舉

單兵報告,座標迷失,座標迷失~~找不到回部隊的路....

/images/emoticon/emoticon39.gif

這個做法實在太不人性化了
就好比在一張 A4 紙上畫個小時鐘
手不移動
卻把紙轉來轉去,移來移去的...
/images/emoticon/emoticon06.gif

fillano iT邦超人 1 級 ‧ 2016-08-19 11:56:54 檢舉

canvas 2d context就是這樣設計,沒辦法XD

不過從另一方面來說,如果不這樣做,自己算出座標其實也有點麻煩...至少要很熟三角函數...

我要發表回答

立即登入回答