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

JavaScript在網(wǎng)頁(yè)中畫(huà)圓的函數(shù)arc使用方法

 更新時(shí)間：2015年11月13日 14:21:20   作者：王業(yè)樓  
這篇文章主要介紹了JavaScript在網(wǎng)頁(yè)中畫(huà)圓的函數(shù)arc使用方法的相關(guān)資料,需要的朋友可以參考下

一、arc所需要的參數(shù)設(shè)置

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

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


其中x,y,radius都很容易理解，那么重點(diǎn)說(shuō)說(shuō)startAngle,endAngle和counterclockwise三個(gè)參數(shù)！

二、arc參數(shù)詳解

    1，startAngle和endAngle分別指圓開(kāi)始的角度和結(jié)束的角度，手冊(cè)上面說(shuō)的是開(kāi)始的角度為0，結(jié)束的角度為Math.PI*2，這樣正好畫(huà)一個(gè)圓

    2，下面通過(guò)實(shí)例來(lái)講解startAngle和endAngle（注意html的代碼我沒(méi)有寫(xiě)）

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

我將開(kāi)始角度設(shè)為0，結(jié)束角度設(shè)為1，這樣如下圖

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

  我將開(kāi)始角度設(shè)為1，結(jié)束角度設(shè)為2，這樣如下圖

 


    上面我們可以看出第一張圖的終點(diǎn)就是第二張圖的起點(diǎn)，也就是說(shuō)一個(gè)圓有無(wú)數(shù)個(gè)角度，只要你設(shè)置了開(kāi)始角度和結(jié)束角度，它就可以以圓弧的形狀將兩點(diǎn)連起來(lái)！而起點(diǎn)和終點(diǎn)的差值就是圖上兩點(diǎn)的長(zhǎng)度！當(dāng)起點(diǎn)和終點(diǎn)的差值可以是兩點(diǎn)重合時(shí)，就形成了圓！知道這一點(diǎn)我們就可以制作動(dòng)態(tài)圓

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

    大家看，當(dāng)我將起點(diǎn)設(shè)置為0，終點(diǎn)為1，選擇順時(shí)針時(shí)

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

當(dāng)我將起點(diǎn)設(shè)置為0，終點(diǎn)為1，選擇逆時(shí)針時(shí)

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


以上內(nèi)容是小編給大家介紹的JavaScript在網(wǎng)頁(yè)中畫(huà)圓的函數(shù)arc使用方法，希望大家喜歡。

相關(guān)文章

最新評(píng)論