首頁 > web前端 > js教程 > js+ca​​nvas簡單繪製圓圈的方法_javascript技巧

js+ca​​nvas簡單繪製圓圈的方法_javascript技巧

WBOY
發布: 2016-05-16 15:17:14
原創
2290 人瀏覽過

本文實例講述了js+ca​​nvas簡單繪製圓圈的方法。分享給大家參考,具體如下:

運作效果截圖如下:

具體程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>canvas画圆圈</title>
  <script type="text/javascript" >
  function drawCircle(id){
    var canvas = document.getElementById(id);
    if(canvas ) {
      var context = canvas.getContext("2d");
      context.fillStyle = "gray";
      context.strokeStyle = "black";
      context.fillRect(0, 0, 400, 400);
      context.beginPath();
      context.arc(100, 100, 50, 0, Math.PI*2, true);
      context.closePath();
      context.fillStyle = "green";
      context.fill();
    } else {
      return;
    }
  }
  window.onload = function () {
    drawCircle("canvas");
  }
  </script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
</body>
</html>

登入後複製

更多關於JavaScript相關內容有興趣的讀者可查看本站專題:《JavaScript動畫特效與技巧匯總》及《JavaScript運動效果與技巧匯總

希望本文所述對大家JavaScript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板