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

更新時間：2016年01月28日 11:36:23 作者：m1870164

這篇文章主要介紹了js+canvas簡單繪制圓圈的方法,涉及JavaScript調(diào)用canvas組件實現(xiàn)簡單圖形繪制的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧匯總》及《JavaScript運動效果與技巧匯總》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

js
canvas

相關(guān)文章

bootstrap的工具提示實例代碼
Bootstrap 工具提示（Tooltip）插件當(dāng)您想要描述一個鏈接的時候，工具提示（Tooltip）就顯得非常有用。這篇文章通過實例代碼給大家介紹bootstrap的工具提示功能，需要的朋友參考下吧
2017-05-05
Java File類的常用方法總結(jié)
這篇文章主要介紹了Java File類的常用方法總結(jié),本文講解了File類的常用方法,并對一些方法給出了代碼示例,需要的朋友可以參考下
2015-03-03
JS下高效拼裝字符串的幾種方法比較與測試代碼
本文介紹一下js如何高效來拼裝字符串的方法，希望大家看了以后多用效率高的代碼，不要讓客戶端瀏覽器執(zhí)行的太慢，提高用戶體驗。
2010-04-04
layui 監(jiān)聽select選擇獲取當(dāng)前select的ID名稱方法
今天小編就為大家分享一篇layui 監(jiān)聽select選擇獲取當(dāng)前select的ID名稱方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS基于面向?qū)ο髮崿F(xiàn)的拖拽庫實例
這篇文章主要介紹了JS基于面向?qū)ο髮崿F(xiàn)的拖拽庫,以實例形式分析了JavaScript設(shè)置水平、垂直拖拽及限制拖拽范圍的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
千萬別錯過的JavaScript?sort方法使用指南
sort方法在我們的日常開發(fā)中是經(jīng)常使用的，sort方法一般是用來對數(shù)組進行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來深入了解sort方法吧
2023-05-05
使用JavaScript實現(xiàn)文本收起展開(省略)功能
省略號,作為一種常見的文本處理方式,在很多情況下都十分常見,特別是當(dāng)我們需要在省略號后面添加額外文字時,本文為大家介紹了使用JavaScript實現(xiàn)文本收起展開功能的相關(guān)方法,希望對大家有所幫助
2024-04-04
webpack+express實現(xiàn)文件精確緩存的示例代碼
這篇文章主要介紹了webpack+express實現(xiàn)文件精確緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
js點擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程
這篇文章主要為大家詳細(xì)介紹了js點擊返回跳轉(zhuǎn)到指定頁面實現(xiàn)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04