编程 Javascript

js+canvas简单绘制圆圈的方法

Posted in Javascript onJanuary 28, 2016

本文实例讲述了js+canvas简单绘制圆圈的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

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程序设计有所帮助。

js+canvas简单绘制圆圈的方法

- Author -

m1870164

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中各种编码解码函数的区别和注意事项

Aug 19 Javascript

封装的原生javascript弹出层代码

Sep 24 Javascript

JavaScript 中的日期和时间及表示标准介绍

Aug 21 Javascript

jquery对单选框,多选框,文本框等常见操作小结

Jan 08 Javascript

javascript实现切换td中的值

Dec 05 Javascript

javascript结合ajax读取txt文件内容

Dec 05 Javascript

JavaScript时间转换处理函数

Apr 14 Javascript

细数JavaScript 一个等号,两个等号,三个等号的区别

Oct 09 Javascript

想用好React的你必须要知道的一些事情

Jul 24 Javascript

webpack中CommonsChunkPlugin详细教程(小结)

Nov 09 Javascript

详解vue 数组和对象渲染问题

Sep 21 Javascript

webpack打包html里面img后src为“[object Module]”问题

Dec 22 Javascript

谈一谈javascript闭包

Jan 28 #Javascript

JavaScript统计字符串中每个字符出现次数完整实例

Jan 28 #Javascript

基于javascript实现checkbox复选框实例代码

Jan 28 #Javascript

JavaScript黑洞数字之运算路线查找算法(递归算法)实例

Jan 28 #Javascript

JS+CSS实现DIV层的展开、收缩效果

Jan 28 #Javascript

js+canvas绘制五角星的方法

Jan 28 #Javascript

js+html5实现的自由落体运动效果代码

Jan 28 #Javascript