圖文詳細(xì)說(shuō)明如何用canvas畫(huà)實(shí)心圓與空心圓
發(fā)表時(shí)間：2023-08-29 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]canvas是HTML5中新增的特性，它可以在瀏覽器上繪制出各種圖形，作為一個(gè)前端工作者，你會(huì)用canvas畫(huà)一個(gè)圓嗎？這篇文章就和大家講講如何用canvas畫(huà)一個(gè)實(shí)心圓，以及分享用canvas arc畫(huà)空心圓的代碼，有一定的參考價(jià)值，感興趣的朋友可以參考一下。HTML5中的canvas arc（...
canvas是HTML5中新增的特性，它可以在瀏覽器上繪制出各種圖形，作為一個(gè)前端工作者，你會(huì)用canvas畫(huà)一個(gè)圓嗎？這篇文章就和大家講講如何用canvas畫(huà)一個(gè)實(shí)心圓，以及分享用canvas arc畫(huà)空心圓的代碼，有一定的參考價(jià)值，感興趣的朋友可以參考一下。
HTML5中的canvas arc（）可以用來(lái)創(chuàng)建圓，首先和大家講講arc（）的語(yǔ)法及參數(shù)設(shè)置
語(yǔ)法：arc(x,y,r,sAngle,eAngle,counterclockwise)
x 表示圓中心的 X 軸坐標(biāo)
y 表示圓中心的 Y 軸坐標(biāo)
r 表示圓的半徑
sAngle 表示圓的起始角，按弧度計(jì)算，0度在園的三點(diǎn)鐘位置
eAngle 表示園的結(jié)束角，以弧度計(jì)。
counterclockwise 是一個(gè)可選值，它規(guī)定了畫(huà)圓的方向，是順時(shí)針還是逆時(shí)針，F(xiàn)alse 是順時(shí)針，true 是逆時(shí)針
注：用arc() 來(lái)創(chuàng)建圓，需要將起始角設(shè)置為 0，結(jié)束角設(shè)置為 2*Math.PI
畫(huà)圓的角度可以參考下圖：
實(shí)例1：用canvas畫(huà)一個(gè)空心圓，代碼如下：
<!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"); //創(chuàng)建context對(duì)象
ctx.beginPath();//標(biāo)志開(kāi)始一個(gè)路徑
ctx.arc(100,50,40,0,2*Math.PI);//在canvas中繪制圓形
ctx.stroke()
</script>
</html>效果圖：
實(shí)例2：用canvas畫(huà)一個(gè)紅的實(shí)心圓，代碼如下：
<!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屬性可以設(shè)置圓形的顏色，本例將其設(shè)置為紅色，ctx.fill()將顏色應(yīng)用于圓形上，效果如圖所示：
以上給大家介紹了如何用canvas畫(huà)圓，比較詳細(xì)，沒(méi)有接觸過(guò)的朋友一定要自己動(dòng)手嘗試，看看自己能不能繪制出圓形，希望這篇文章對(duì)你有所幫助！
【相關(guān)教程推薦】
1. Html5視頻教程
2. JavaScript視頻教程
3. bootstrap教程
以上就是圖文詳解如何用canvas畫(huà)實(shí)心圓和空心圓的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
