【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

HTML5 Canvas 貝茲曲線(上)

貝茲曲線是學習繪圖不可或缺的技巧,當然,Canvas 亦提供了相關的方法支援貝茲曲線的描繪,如下圖即是以 quadraticCurveTo() 方法描繪出來的貝茲曲線。


您的瀏覽器不支援HTML5,請改用 Chrome 或 Firefox ~


以下是需要的語法:

context.moveTo(x1, y1);
context.quadraticCurveTo(cx, cy, x2, y2);
context.stroke();

moveTo() 方法中的 x1, y1 座標是曲線的左邊端點,quadraticCurveTo() 方法中的 x2, y2 則是曲線右邊的端點,而 cx 與 cy 則是貝茲曲線的控制點。現在只要再加上滑鼠事件回應函式,就可以輕易的實作簡單的動態貝茲曲線,我們下一篇作說明。


沒有留言: