HTML html5 Canvas畫(huà)圖教程(11)—使用lineTo/arc/bezierCurveTo畫(huà)橢圓形 在canvas中可以很方便的用arc方法畫(huà)出圓形，本來(lái)圓形也可以看作是一個(gè)寬高相等的橢圓，但canvas中根本沒(méi)有畫(huà)橢圓的方法，我們要用其他方法來(lái)模擬。 我們首先要明確畫(huà)一個(gè)橢圓需要那些參數(shù)，基本的幾何知識(shí)告訴我們，橢圓需要圓心坐標(biāo)，寬度，高度 或者還有旋轉(zhuǎn)角度，不過(guò)這個(gè)可以暫時(shí)不要，旋轉(zhuǎn)是比較容易的。 1,使用lineTo畫(huà)橢圓 你沒(méi)有看錯(cuò)，lineTo這樣一個(gè)純粹用來(lái)畫(huà)直線(xiàn)的方法居然可以用來(lái)畫(huà)橢圓！？但他確實(shí)存在，不過(guò)寫(xiě)法實(shí)在是有些不可思議：
復(fù)制代碼代碼如下: function DrawEllipse(Canvas,O,OA,OB){ //畫(huà)橢圓，例子：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); } } }
復(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()
復(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(); }
