欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5 Canvas畫圖教程(11)—使用lineTo/arc/bezierCurveTo畫橢圓形

  發(fā)布時間:2013-01-09 15:03:34   作者:佚名   我要評論
canvas中根本沒有畫橢圓的方法,我們要用其他方法來模擬,我們首先要明確畫一個橢圓需要那些參數(shù),基本的幾何知識告訴我們,橢圓需要圓心坐標,寬度,高度——或者還有旋轉(zhuǎn)角度,接下來將介紹使用lineTo畫橢圓,使用arc畫圓,然后把他縮放成一個橢圓,使用貝賽爾曲線bezie

在canvas中可以很方便的用arc方法畫出圓形,本來圓形也可以看作是一個寬高相等的橢圓,但canvas中根本沒有畫橢圓的方法,我們要用其他方法來模擬。
我們首先要明確畫一個橢圓需要那些參數(shù),基本的幾何知識告訴我們,橢圓需要圓心坐標,寬度,高度——或者還有旋轉(zhuǎn)角度,不過這個可以暫時不要,旋轉(zhuǎn)是比較容易的。
1,使用lineTo畫橢圓
你沒有看錯,lineTo這樣一個純粹用來畫直線的方法居然可以用來畫橢圓?。康_實存在,不過寫法實在是有些不可思議:

復(fù)制代碼
代碼如下:

function DrawEllipse(Canvas,O,OA,OB){
//畫橢圓,例子:var B=new Array(150,150); DrawEllipse(hb,B,50,30);
with (Canvas){
var x=O[0]+OA;
var y=O[1];
moveTo(x,y);
for (var i=0;i<=360;i++){
var ii=i*Math.PI/180;
var x=O[0]+OA*Math.cos(ii);
var y=O[1]-OB*Math.sin(ii);
lineTo(x,y);
}
}
}

這個方法的原理是,一個圓有360度,那么就用lineTo循環(huán)360次,畫出每一度的線段,最終連成一個橢圓。其中需要用到三角函數(shù)正弦余弦進行計算。
注意,這個方法的第2個參數(shù)是個數(shù)組,即橢圓的圓心坐標.

思路很奇葩,而且畫出的橢圓也比較平滑。但不值得大家使用——此方法每畫一個橢圓,就要循環(huán)360次,只有畫的橢圓稍微一多,對瀏覽器的性能就是個考驗。
我們只用了解一下他的思路即可
2,使用arc畫圓,然后把他縮放成一個橢圓
這個方法的原文在此,核心函數(shù)如下:

復(fù)制代碼
代碼如下:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore()

此方法用了一個我前面還沒講過的canvas函數(shù),即scale,他能實現(xiàn)canvas的縮放。縮放有水平和垂直兩個方向,代碼中把canvas水平方向放大了,而垂直方向不變,so,原來arc畫出的圓形就變成了一個橢圓。
這個方法初看甚妙,代碼少,而且原理淺顯易懂。但分析一下就能發(fā)現(xiàn)他的明顯缺點了,就是——不精確!比如我需要寬171高56的橢圓,此時我們?nèi)绻補rc的半徑定為28的話,那么后面就要為171/28/2這個不知所云的數(shù)字郁悶了。

不過有個折中的辦法是始終把arc的半徑設(shè)成100,然后,不夠就放大,超過了就縮小。但是,還是不精確。
3,使用貝賽爾曲線bezierCurveTo
自從覺得上面的縮放法不精確后,我就很想找到一個精確的畫橢圓的方法,最后在stackoverflow上找到了:

復(fù)制代碼
代碼如下:

function drawEllipse(ctx, x, y, w, h) {
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.stroke();
}

這個方法可以算是比較完美的了。他把一個橢圓分成了4條貝塞爾曲線,用他們連成了一個橢圓。最后寬度高度也比較精確,開銷也較少。
但此方法依然有缺點。大家看那個kappa參數(shù),有個很奇特的值,相信很多人在幾何專家告訴你為什么他要取這個值之前,都不明白為什么非要取這個值——我到現(xiàn)在還是不知道。并且我有很強烈的想把他改一下看看有什么后果的沖動。

當(dāng)然我這種類似強迫癥患者的沖動并不能說成是此方法的缺點,他真正的缺點是——為什么要用4條貝塞爾曲線?我個人覺得,一個橢圓明顯是由兩條貝塞爾曲線組成的而不是4條。這個想法最終讓我找到了最完美的畫橢圓的方法。
 4,使用兩條貝賽爾曲線畫出橢圓
為了了解上一個方法能否精簡,我專門注冊了一個stackoverflow的帳號去提問,由于問題里有圖片,積分不夠不能傳,我還迫不得已用勉勉強強的英語水平去回答老外的問題掙積分。但最終好運到了,回答一個問題就解決了我的積分問題。
我提的貝賽爾曲線和橢圓的關(guān)系的問題在此.
說實話,下面老外的回答我大部分沒看懂,但幸虧他提供了一個代碼示例頁,讓我明白了原理,在此對他表示再次的感謝。而根據(jù)他的解答,我找到的畫橢圓的方法如下:

復(fù)制代碼
代碼如下:

//橢圓
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
var k = (width/0.75)/2,
w = width/2,
h = height/2;
this.beginPath();
this.moveTo(x, y-h);
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h);
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h);
this.closePath();
return this;
}

此方法既精確,又代碼少,而且也沒有奇怪的難懂的地方。只需要記住這一點,橢圓的寬度與畫出橢圓的貝賽爾曲線的控制點的坐標比例如下:
貝塞爾控制點x=(橢圓寬度/0.75)/2這一點已經(jīng)在代碼中體現(xiàn)了。

大家可自行試驗上面的4個方法畫出橢圓。
如果你發(fā)現(xiàn)了更簡單的方法,也請分享出來大家探討吧。

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論