繞中心旋轉

本文告訴讀者在canvas中怎麼繞中心旋轉，通過此方法模擬出乙個2d平面內的水珠，涉及的知識點和技巧包括：jscex基礎知識，貝塞爾曲線的繪製，合理利用canvasrenderingcontext2d的translate和rotate等api。

在模擬水滴之前，我們先思考一下怎麼在canvas當中繪製乙個橢圓。

1.根據橢圓笛卡爾座標系方程繪製

2.根據橢圓極座標方程繪製

3.根據橢圓曲率變化繪製

4.利用四條貝塞爾曲線繪製

般情況下比較靠譜).

所以我們採用第四種方式來繪製橢圓。

var canvas; var ctx; canvas = document.getelementbyid("mycanvas1"); ctx = canvas.getcontext("2d"); ctx.strokestyle = "#fff"; function drawellipse(x, y, w, h) ctx.clearrect(0,0,canvas.width,canvas.height); drawellipse(10, 10, 40, 82);

（改變drawellipse的四個引數試試）

your browser does not support the canvas element.

這裡的旋轉不是繞上面的drawellipse的前兩個引數x,y旋轉，二是繞橢圓的中心旋轉。所以僅僅canvasrenderingcontext2d.rotate是不夠的，因為canvasrenderingcontext2d.rotate是繞畫布的左上角（0，0）旋轉。所以我們先要把（0，0）通過canvasrenderingcontext2d.translate到橢圓的中心，然後再drawellipse(-a/2, –b/2, a, b).

然後我們就可以先繪製乙個旋轉橢圓出來：

your browser does not support the canvas element.

旋轉的橢圓和鳥巢神馬的和水滴有什麼關係呢？

我們通過改變橢圓的長軸和短軸，令其非常接近圓形（只能接近，不能等於圓形），然後每次旋轉擦除畫布，就可以達你預想不到的效果！

這裡需要注意的是，擦除畫布不再是一句canvasrenderingcontext2d.clearrect(0,0,canvas.width,canvas.height)就可以，因為畫布已經旋轉和畫布原點已經translate，所以我們使用 ctx.clearrect(-translate.width, -translate.height, canvas.width, canvas.height)來擦除畫布。

我們畫乙個長軸42，短軸40的橢圓，旋轉並擦除畫布：

function 

drawellipse(x, y, w, h) 
var 
ct;        
var 
drawasync = eval(jscex.compile(
"async"
, function 
(ct) 
}))

現在大家可以看到乙個晃動的水珠了。

繞任意軸旋轉

關於最常見的繞座標軸旋轉，可以看看前一篇 幾何變換詳解。繞任意軸旋轉的情況比較複雜，主要分為兩種情況，一種是平行於座標軸的，一種是不平行於座標軸的，對於平行於座標軸的，我們首先將旋轉軸平移至與座標軸重合，然後進行旋轉，最後再平移回去。整個過程就是 對於不平行於座標軸的，可按如下方法處理。該方法實際上...

繞任意軸旋轉

繞任意軸旋轉 關於最常見的繞座標軸旋轉，可以看看前一篇 幾何變換詳解。繞任意軸旋轉的情況比較複雜，主要分為兩種情況，一種是平行於座標軸的，一種是不平行於座標軸的，對於平行於座標軸的，我們首先將旋轉軸平移至與座標軸重合，然後進行旋轉，最後再平移回去。整個過程就是 對於不平行於座標軸的，可按如下方法處理...

繞任意軸旋轉

關於最常見的繞座標軸旋轉，可以看看前一篇 幾何變換詳解。繞任意軸旋轉的情況比較複雜，主要分為兩種情況，一種是平行於座標軸的，一種是不平行於座標軸的，對於平行於座標軸的，我們首先將旋轉軸平移至與座標軸重合，然後進行旋轉，最後再平移回去。整個過程就是 對於不平行於座標軸的，可按如下方法處理。該方法實際上...