Mysql許可外網拜訪設置步調。本站提示廣大學習愛好者：（Mysql許可外網拜訪設置步調）文章只能為提供參考，不一定能成為您想要的結果。以下是Mysql許可外網拜訪設置步調正文
概述
HTML5中的Canvas並沒有直接供給繪制橢圓的辦法，上面是對幾種繪制辦法的總結。各類辦法各有優缺，視情形選用。各辦法的參數雷同：
1.context為Canvas的2D畫圖情況對象，
2.x為橢圓中間橫坐標，
3.y為橢圓中間縱坐標，
4.a為橢圓橫半軸長，
5.b為橢圓縱半軸長。
參數方程法
該辦法應用橢圓的參數方程來繪制橢圓
//-----------用參數方程繪制橢圓---------------------
//函數的參數x,y為橢圓中間；a,b分離為橢圓橫半軸、
//縱半軸長度，弗成同時為0
//該辦法的缺陷是，當lineWidth較寬，橢圓較扁時
//橢圓外部長軸端較為尖利，不屈滑，效力較低
function ParamEllipse(context, x, y, a, b)
{
//max是等於1除以長軸值a和b中的較年夜者
//i每次輪回增長1/max，表現度數的增長
//如許可使得每次輪回所繪制的途徑（弧線）接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //從橢圓的左端點開端繪制
for (var i = 0; i < 2 * Math.PI; i += step)
{
//參數方程為x = a * cos(i), y = b * sin(i)，
//參數為i，表現度數（弧度）
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
};
平均緊縮法
這類辦法應用了數學中的平均緊縮道理將圓停止平均緊縮為橢圓，實際上為可以或許獲得尺度的橢圓.上面的代碼會湧現線寬紛歧致的成績，處理方法看5樓simonleung的評論。
</p>
<p>//------------平均緊縮法繪制橢圓--------------------
//其辦法是用arc辦法繪制圓，聯合scale停止
//橫軸或縱軸偏向縮放（平均緊縮）
//這類辦法繪制的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
//邊離短軸越近、橢圓越扁越細，乃至發生連續，這是scale招致的成果
//這類缺陷某些時刻是長處，好比在表示環的平面後果（行星光環）時
//關於參數a或b為0的情形，這類辦法不實用
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//選擇a、b中的較年夜者作為arc辦法的半徑參數
var r = (a > b) ? a : b;
var ratioX = a / r; //橫軸縮放比率
var ratioY = b / r; //縱軸縮放比率
context.scale(ratioX, ratioY); //停止縮放（平均緊縮）
context.beginPath();
//從橢圓的左端點開端逆時針繪制
context.moveTo((x + a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.restore();
};
三次貝塞爾曲線法一
三次貝塞爾曲線繪制橢圓在現實繪制時是一種近似，在實際上也是一種近似。 但由於其效力較高，在盤算機矢量圖形學中，經常使用於繪制橢圓，然則詳細的實際我不是很清晰。 近似水平在於兩個掌握點地位的拔取。這類辦法的掌握點地位是我本身實驗得出，精度還可以.
//---------應用三次貝塞爾曲線模仿橢圓1---------------------
//此辦法也會發生當lineWidth較寬，橢圓較扁時，
//長軸端較尖利，不屈滑的景象
function BezierEllipse1(context, x, y, a, b)
{
//症結是bezierCurveTo中兩個掌握點的設置
//0.5和0.6是兩個症結系數（在本函數中為實驗而得）
var ox = 0.5 * a,
oy = 0.6 * b;</p>
<p> context.save();
context.translate(x, y);
context.beginPath();
//從橢圓縱軸下端開端逆時針偏向繪制
context.moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b);
context.closePath();
context.stroke();
context.restore();</p>
<p>};
三次貝塞爾曲線法二
這類辦法是從StackOverFlow中一個帖子的答復中轉變而來，精度較高，也是平日用來繪制橢圓的辦法.
//---------應用三次貝塞爾曲線模仿橢圓2---------------------
//此辦法也會發生當lineWidth較寬，橢圓較扁時
//，長軸端較尖利，不屈滑的景象
//這類辦法比前一個貝塞爾辦法准確度高，但效力稍差
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 程度掌握點偏移量
oy = b * k; // 垂直掌握點偏移量</p>
<p> ctx.beginPath();
//從橢圓的左端點開端順時針繪制四條三次貝塞爾曲線
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();
};
光柵法
這類辦法可以依據Canvas可以或許操作像素的特色，應用圖形學中的根本算法來繪制橢圓。 例如中點畫橢圓算法等。
個中一個例子是園友“豆豆狗”的一篇博文“HTML5 Canvas 進步班（一） —— 光柵圖形學（1）中點畫圓算法”。這類辦法因為比擬“原始”，靈巧性年夜，效力高，精度高，但要想完成一個有應用價值的繪制橢圓的函數，比擬龐雜。好比，要當線寬轉變時，算法就龐雜一些。固然是畫圓的算法，但畫橢圓的算法與之相似，可以參考下。
總結
根本上一切的辦法都弗成能到達100%准確，由於受顯示器分辯率的限制。
其實最好的辦法應當是arc()+scale()。canvas畫圖庫KineticJS就是用的這類辦法。
在其他畫圖軟件中，不像HTML5的canvas那樣供給固有的arc()+scale()辦法，平日用貝塞爾曲線模仿近似橢圓，不管是幾條貝塞爾曲線都是近似罷了。關於用貝塞爾曲線模仿橢圓，可以參考這份材料：Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves。
因為arc()+scale()是閱讀器曾經完成的辦法，實際上精度最高，所以從效力、准確度和簡略易用水平下去講，都是最好的。
在用arc()+scale()繪制完橢圓後，context.stroke()和 context.restore()兩個辦法挪用的前後次序分歧，發生的成果會很成心思的。平日應當先restore()再stroke()。
Demo
上面是除光柵法以外，幾個繪制橢圓函數的演示，演示代碼以下：
<div id="CanvasWrap" ></div></p>
<p><script type="text/javascript">// <![CDATA[
var canvas,
context;
var div = document.getElementById("CanvasWrap");
div.innerHTML = "";
canvas = document.createElement("canvas");
canvas.style.width = "600px"
canvas.style.height = "600px"
canvas.width = 600;
canvas.height = 600;
context = canvas.getContext("2d");
div.appendChild(canvas);</p>
<p> function execDraw()
{
//處理Chrome下的線寬小於等於1的成績
context.lineWidth = 1.1;
context.stroke
ParamEllipse(context, 130, 80, 50, 50); //圓
ParamEllipse(context, 130, 80, 100, 20); //橢圓
EvenCompEllipse(context, 130, 200, 50, 50); //圓
EvenCompEllipse(context, 130, 200, 100, 20); //橢圓
BezierEllipse1(context, 470, 80, 50, 50); //圓
BezierEllipse1(context, 470, 80, 100, 20); //橢圓
BezierEllipse2(context, 470, 200, 50, 50); //圓
BezierEllipse2(context, 470, 200, 100, 20); //橢圓
//檢測類似性(重合的水平)
ParamEllipse(context, 300, 450, 250, 50);
context.strokeStyle = "yellow";
BezierEllipse1(context, 300, 450, 250, 50);
context.strokeStyle = "blue";
BezierEllipse2(context, 300, 450, 250, 50);
};</p>
<p> function clearCavnas()
{
context.clearRect(0, 0, 600, 600);
};
// ]]></script></p>
<p><p>
<button onclick="execDraw();" type="button">履行</button>
<button onclick="clearCanvas();" type="button">清算</button>
</p>
留意，要勝利運轉代碼，須要支撐HTML5的Canvas的閱讀器。
