2010/10/20

arcTo瀏覽器差異

Canvas是HTML5新增的功能，可以用來繪圖，不過各家瀏覽器支援的情況也不完全相同，今天發現在Opera上執行arcTo會有很大的差異（IE9以下的版本更不用說，根本看不到）。


先介紹一下arcTo(x1,y1,x2,y2,radius)

arcTo是用來描繪直線以及與其相切相連的圓弧。
  •  x1,y1 指現在的位置（moveTo）畫往(x1,y1)。不過…不會真的有moveTo到(x1,y1)的直線，底下會說明，先假設moveTo-( x1,y1)為直線a。
  • x2,y2指(x1,y1)畫往(x2,y2)。但…也不會真的有(x1,y1)到(x2,y2)的直線，底下會說明，先假設(x1,y1)-( x2,y2)為直線b。
  • radius指一個虛擬圓的半徑（描繪出來圓弧的半徑）。
直線a只會從moveTo畫到直線a與虛擬圓相切的座標。畫到此座標後，開始畫半徑為radius的弧。
而直線b基本上是完全看不到的，他是用來決定弧的終點。弧的終點為直線b與虛擬圓的相切。

參考下圖

實際範例

<html>
<body>
<canvas id="canvas1" width="200" height="200"></canvas>
<script type="text/javascript">
 var canvas=document.getElementById("canvas1");
 var cx = canvas.getContext("2d");
 cx.beginPath();
 cx.moveTo(0,100);
 cx.arcTo(50,50,100,100,50);
 cx.stroke();
</script>
</body>

看執行結果

以上是arcTo的用法及介紹。
現在問題來了，不一定所有的瀏覽器解讀arcTo都是如此，使用Opera10的人看範例，應該會發現與說明解釋的樣子不同，以下分別是Chrome與Opera10執行arcTo的結果截圖。

可以很明顯的發現差異，Opera10解析arcTo的參數與別人不同，我測試的結果覺得他的參數意義如下。
  • x1,y1 指現在的位置（moveTo）畫往(x1,y1)。而且還真的會畫出moveTo到(x1,y1)的直線。
  • x2,y2指(x1,y1)畫往(x2,y2)，但畫的是以radius為半徑的弧。不過會有例外：當radius的兩倍（就是直徑）小於(x1,y1)到(x2,y2)的距離時，會以(x1,y1)到(x2,y2)為直徑逆時針畫弧。
  • radius一樣是指一個虛擬圓的半徑（描繪出來圓弧的半徑）。


各家瀏覽器支援HTML5的情形不一，真的很困擾，尤其對網頁設計師來說，一定蠻頭大的…
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)