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

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
推荐:极酷右键菜单
Nov 29 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
JavaScript实现区块链
2018/03/14 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Django日志及中间件模块应用案例
2020/09/10 Python
应届大学生求职信
2013/12/01 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
社团活动总结报告
2014/06/27 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
走群众路线剖析材料
2014/10/09 职场文书
个性发展自我评价2015
2015/03/09 职场文书
药店收银员岗位职责
2015/04/07 职场文书