canvas繪製圓形（六）
阿新 • • 發佈：2018-12-12
首先圓形也是路徑，所以也需要開始和結束和填充
開始 結束 填充程式碼
context.beginPath();
<!-- 畫圓函式-->
context.closePath();
context.fill();畫圓函式
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
引數x,y表示圓心座標；
引數startAngle表示起始角度，從x軸正向開始算起
引數endAngle表示結束角度，（角度採用弧度制，即360度=2*PI）
引數anticlockwise表示角度方向（以逆時針為true）下面繪製一個圓
程式碼如下：fill是填充，stroke是繪製路徑；
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canves高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.beginPath(); context.arc(100,200,50,0,Math.PI,true); context.closePath(); context.fill(); context.beginPath(); context.arc(200,200,40,0,Math.PI*2,true); context.closePath(); context.stroke(); }); </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas> </body> </html>
效果圖：
改變顏色與前面矩形、線條一樣，這裡不做說明
改變寬度與前面矩形、線條一樣，這裡不做說明