如何用javascript畫圓

用javascript畫圓的方法：1、設定arc所需的參數；2、設定startAngle和endAngle；3、透過counterclockwise設定畫圓的方向即可。

本文操作環境：windows7系統、javascript1.8.5版、DELL G3電腦

如何用javascript畫圓？

JavaScript在網頁中畫圓的函數arc使用方法

本文操作環境：windows7系統、javascript1.8.5版、DELL G3電腦

#一、arc所需的參數設定

程式碼如下:

arc(x, y, radius, startAngle, endAngle, counterclockwise);

其中x,y,radius都很容易理解，那麼重點說startAngle,endAngle和counterclockwise三個參數！

二、arc參數詳解

    1，startAngle和endAngle分別指圓開始的角度和結束的角度，手冊上面所說的是開始的角度為0，結束的角度為Math.PI*2，這樣剛好畫一個圓形

    2，下面透過實例來講解startAngle和endAngle（注意html的程式碼我沒有寫）

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

我將開始角度設為0，結束角度設為1，這樣如下圖

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

  我將開始角度設為1，結束角度設為2，這樣如下圖

 

    上面我們可以看出第一張圖的終點就是第二張圖的起點，也就是說一個圓有無數個角度，只要你設定了開始角度和結束角度，它就可以以圓弧的形狀將兩點連起來！而起點和終點的差就是圖上兩點的長度！當起點和終點的差值可以是兩點重合時，就形成了圓！知道這一點我們就可以製作動態圓

    3，counterclockwise是指是逆時針(true)還是順時針(false)

    大家看，當我將起點設為0，終點為1，選擇順時針時

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

#當我將起點設為0，終點為1，選擇逆時針時

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();

推薦學習：《javascript基礎教學》

以上是如何用javascript畫圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！