我們來直接看示例

代碼如下

 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var cx = 360; var cy = 400; var radius = 36; var context = canvas.getContext( 2d  context.beginPath(); context.arc(cx, cy, radius, 0, 2 * Math.PI, false); context.fillStyle = #9fd9ef  context.fill(); context.lineWidth = 1; context.strokeStyle = #00477d  context.stroke(); /script  /head  body onload= draw() >
運行結果
瀏覽器上執行上述HTML文件。將會顯示如下效果
最后說明一點
arc()方法給出的圓的坐標是圓的中心坐標。
在上述的HTML代碼中，將繪圖部分設為下面的代碼。
function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var cx = 360;  var cy = 400;  var radius = 36; var context = canvas.getContext( 2d  context.beginPath(); context.arc(cx, cy, radius, 0, 2 * Math.PI, false); context.fillStyle = #9fd9ef  context.fill(); context.lineWidth = 1; context.strokeStyle = #00477d  context.stroke();  context.beginPath(); context.moveTo(0, 0); context.lineTo(cx, cy); context.stroke(); }
上述代碼的顯示效果如下，可以看到中心坐標是圓的中心。
以上就是HTML5 canvas如何繪制圓形？（代碼實例）的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。