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 相关文章推荐
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JavaScript的==运算详解
Jul 20 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
layui-select动态选中值的例子
Sep 23 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php array_search() 函数使用
2010/04/13 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue中element 上传功能的实现思路
2018/07/06 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
详解Python发送email的三种方式
2018/10/18 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python搜索包的路径的实现方法
2019/07/19 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
商务英语专业自荐信
2013/10/14 职场文书
优秀实习生感言
2014/03/01 职场文书
讲座主持词
2014/03/20 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP
python中pymysql包操作数据库方法
2022/04/19 Python