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 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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
php自动加载机制的深入分析
2013/06/08 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PDO::setAttribute讲解
2019/01/29 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
vue如何截取字符串
2019/05/06 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python 多线程应用介绍
2012/12/19 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
简单谈谈python的反射机制
2016/06/28 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
企业管理专业个人求职信范文
2013/09/24 职场文书
活动邀请函范文
2014/01/19 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python