js+canvas簡單繪制圓圈的方法

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js+canvas簡單繪制圓圈的方法

js+canvas簡單繪制圓圈的方法

編輯：關於JavaScript

本文實例講述了js+canvas簡單繪制圓圈的方法。分享給大家供大家參考，具體如下：

運行效果截圖如下：

具體代碼如下：

<!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程序設計有所幫助。

關於JavaScript

js獲取頁面傳來參數的方法教程: 這篇文章主要介紹了通過window.location.search來獲取頁面傳來的參數，經測試是OK
JavaScript設置表單上傳時文件個數的方法: 本文實例講述了JavaScript設置表單上傳時文件個數的方法。分享給大家供大家參考。具體如下：這是
js時間比較 js計算時間差的簡單實現方法: 頁面使用dateTimePicker獲取數據類型為”12:12:12“ 如果輸入”11:11:11“

DIV CSS 佈局教程網

相關文章