JavaScript canvas繪製圓弧與圓形
阿新 • • 發佈:2020-02-19
本文例項為大家分享了canvas繪製圓弧與圓形的具體程式碼,供大家參考,具體內容如下
canvas 繪製圓弧
繪製圓弧使用 context.arc( ) 函式,包含六個引數。
context.arc( centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false )
分別代表:圓心 x 值,圓心 y 值,半徑,開始的弧度值,結束的弧度值,(是否逆時針)。
例如:
window: onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; context.lineWidth = 5; context.strokeStyle = "#005588"; context.arc(300,300,200,1.5*Math.PI) context.stroke(); }
當需要繪製多條圓弧時,還是需要呼叫 context.beginPath( ) 和 context.closePath( ) 。但是當使用 context.closePath( ) 時,會自動將圖形封閉,因此如果需要繪製不封閉圓弧,可以省略 context.closePath( )。
繪製實心圓
跟之前的多邊形一樣,使用 context.fill( ) ,程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <canvas id="canvas"></canvas> <script> window: onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; context.lineWidth = 5; context.strokeStyle = "#005588"; context.arc(300,1.5*Math.PI) context.stroke(); context.fillStyle = "red"; context.fill(); } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。