canvas是HTML5中新增的特性，它可以在瀏覽器上繪製出各種圖形，作為一個前端工作者，你會用canvas畫一個圓嗎？這篇文章就跟大家講講如何用canvas畫一個實心圓，以及分享用canvas arc畫空心圓的程式碼，有一定的參考價值，有興趣的朋友可以參考一下。
HTML5中的canvas arc（）可以用來建立圓，先跟大家講arc（）的語法及參數設定
語法：arc(x,y,r,sAngle, eAngle,counterclockwise)
x 表示圓中心的X 軸座標
y 表示圓中心的Y 軸座標
r 表示圓的半徑
sAngle 表示圓的起始角，以弧度計算，0度在園的三點鐘位置
eAngle 表示園的結束角，以弧度計。
counterclockwise 是一個可選值，它規定了畫圓的方向，是順時針還是逆時針，False 是順時針，true 是逆時針
註：用arc() 來創建圓，需要將起始角設為0，結束角設定為2*Math.PI
畫圓的角度可以參考下圖：
實例1 ：用canvas畫一個空心圓，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//找到 <canvas> 元素:
var ctx=c.getContext("2d"); //创建context对象
ctx.beginPath();//标志开始一个路径
ctx.arc(100,50,40,0,2*Math.PI);//在canvas中绘制圆形
ctx.stroke()
</script>
</html>效果圖：
#實例2：用canvas畫出紅色的實心圓，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
</script>
</html>fillStyle屬性可以設定圓形的顏色，本範例設定為紅色，ctx.fill()將顏色套用到圓形上，效果如圖所示：
以上跟大家介紹如何用canvas畫圓，比較詳細，沒有接觸過的朋友一定要自己動手嘗試，看看自己能不能繪製出圓形，希望這篇文章對你有所幫助！
【相關教學推薦】
1. Html5影片教學
2. JavaScript影片教學
3. bootstrap教程
以上是圖文詳解如何用canvas畫實心圓和空心圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！
如何在 Bootstrap 4 中實現多項目輪播？Apr 30, 2025 pm 03:24 PM在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...
deepseek官網是如何實現鼠標滾動事件穿透效果的？Apr 30, 2025 pm 03:21 PM如何實現鼠標滾動事件穿透效果？在我們瀏覽網頁時，經常會遇到一些特別的交互設計。比如在deepseek官網上，�...
HTML 視頻的播放控件樣式怎麼修改Apr 30, 2025 pm 03:18 PM無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能，使用庫如Video.js或Plyr可簡化過程。
在手機上使用原生select會帶來哪些問題？Apr 30, 2025 pm 03:15 PM在手機上使用原生select的潛在問題在開發移動端應用時，我們常常會遇到選擇框的需求。通常情況下，開發者傾...
在手機上使用原生select的弊端是什麼？Apr 30, 2025 pm 03:12 PM在手機上使用原生select的弊端是什麼？在移動設備上開發應用時，選擇合適的UI組件是非常重要的。許多開發者�...
如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理？Apr 30, 2025 pm 03:09 PM使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...
在手機上使用原生select會遇到哪些問題？Apr 30, 2025 pm 03:06 PM使用原生select在手機上的問題在移動設備上開發應用時，我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...
為什麼有的網站能實現鼠標滾動穿透效果，而有的不行？Apr 30, 2025 pm 03:03 PM探究鼠標滾動事件的實現原理在瀏覽一些網站時，你可能注意到某些頁面元素在鼠標懸停時仍然允許滾動整個頁...
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
