JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法
一、arc所需要的參數(shù)設置
arc(x, y, radius, startAngle, endAngle, counterclockwise);
其中x,y,radius都很容易理解，那么重點說說startAngle,endAngle和counterclockwise三個參數(shù)！
二、arc參數(shù)詳解
1，startAngle和endAngle分別指圓開始的角度和結(jié)束的角度，手冊上面說的是開始的角度為0，結(jié)束的角度為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，結(jié)束角度設為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，結(jié)束角度設為2，這樣如下圖
上面我們可以看出第一張圖的終點就是第二張圖的起點，也就是說一個圓有無數(shù)個角度，只要你設置了開始角度和結(jié)束角度，它就可以以圓弧的形狀將兩點連起來！而起點和終點的差值就是圖上兩點的長度！當起點和終點的差值可以是兩點重合時，就形成了圓！知道這一點我們就可以制作動態(tài)圓
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();
以上內(nèi)容是小編給大家介紹的JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法，希望大家喜歡。
相關文章
JavaScript彈出新窗口并控制窗口移動到指定位置的方法
這篇文章主要介紹了JavaScript彈出新窗口并控制窗口移動到指定位置的方法,涉及javascript針對彈出窗口的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
javascript對于變量的定義、類型的要求都比較松散，這樣既方便，但又容易犯錯。有時候進行必要的類型檢查是必須的。2010-12-12
Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤
這篇文章主要為大家詳細介紹了Jquery+javascript實現(xiàn)支付網(wǎng)頁數(shù)字鍵盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了JavaScript實現(xiàn)身法證驗證代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法
百度個人云盤空間大，完全免費，而且提供了pcs api供調(diào)用操作文件，在平時的項目里往里面保存一些文件是很實用的。通過本文給大家介紹使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學習吧2016-03-03
這篇文章主要介紹了js給onclick賦值傳參數(shù)的兩種方法，有需要的朋友可以參考一下2013-11-11
從零使用TypeScript開發(fā)項目打包發(fā)布到npm
這篇文章主要介紹了從零使用TypeScript開發(fā)項目打包發(fā)布到npm，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
javascript中創(chuàng)建對象的幾種方法總結(jié)
以下幾種，是javascript中最常用的創(chuàng)建對象的方式。初學者看到后，可能會暈掉，甚至會覺得擔心。其實完全不用擔心，這些種方式，只需要掌握一兩種，對其他的幾種只需要理解就好了2013-11-11
js一般方法改寫成面向?qū)ο蠓椒ǖ臒o限級折疊菜單示例代碼
本例是應用別人的例子，原來那位老兄是用一般方法寫成的無限級折疊菜單，通過了一些簡化修改，將原來的例子改成了面向?qū)ο蟮姆绞?/div> 2013-07-07
這篇文章主要介紹了JS實現(xiàn)光滑展開合攏的菜單效果代碼,涉及JavaScript響應鼠標事件遍歷并改變頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09最新評論