HTML5之Canvas画圆形

1、设计源码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画圆形</title>

</head>
<body onLoad="drawFour('canvas')">
   <canvas id="canvas" width="1200" height="560"/>
   <script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var context=canvas.getContext("2d");
		context.fillStyle="#0000ff";
		context.beginPath();
		context.arc(600,300,200,0,Math.PI*2,true);
		context.closePath();
		context.fill();
	</script>
</body>

2、设计结果

3、分析说明

（1）创建路径

context.beginPath();

（2）创建圆形路径

context.arc(600,300,200,0,Math.PI*2,true);

第一个参数x：起点横坐标

第二个参数y：起点纵坐标

第三个参数radius：圆的半径

第四个参数startAngle：开始角度

第五个参数endAngle：结束角度

第六个参数anticlockwise：是否按照顺时针方向进行绘制

（3）关闭路径

context.closePath();

（4）设定绘制样式

context.fillStyle="#0000ff";

context.fill();

HTML5之Canvas画圆形的更多相关文章

  1. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  2. Canvas画圆形

    转载:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#圆弧 function d ...

  3. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 canvas绘制圆形印章，以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. （转）浅谈HTML5与css3画饼图！

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  9. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. python中的协程及实现

    1.协程的概念: 协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈. 协程调度切换时,将寄存器上下文和栈保存到其他地方,在切换回来的时候,恢复先前保存的寄存器上下文和栈. 因此,协程能保留 ...

  2. java配置context.xml文件

    2018-02-08   23:32:23 修改context.xml文件 自从学习了servlet后,每次修改里面的内容后,想要访问都要重启服务器,这样感觉很麻烦的,所以今天就教大家一个方法,只需要 ...

  3. web.xml 文件中一般包括 servlet, spring, filter, listenr的配置的加载顺序

    首先可以肯定 加载顺序与他们在web.xml 文件中的先后顺序无关. web.xml 中 listener 和 serverlet 的加载顺序为 先 listener 后serverlet最终得出结果 ...

  4. SpringMVC源码情操陶冶-HandlerAdapter适配器简析

    springmvc中对业务的具体处理是通过HandlerAdapter适配器操作的 HandlerAdapter接口方法 列表如下 /** * Given a handler instance, re ...

  5. Java对正则表达式的支持(二)

    正则表达式的主要用途: a.在目标字符串中找出匹配正则表达式的部分 b.校验目标字符串是否符合正则表达式,例如校验邮箱地址 c.在目标字符串中替换符合正则表达式的部分为其他的字符串 Scanner类是 ...

  6. JDBC(一)

    JDBC(Java DataBase Conectivity)Java数据库连接,是J2SE的一部分,由java.sql和javax.sql组成. package dbTest; import jav ...

  7. BZOJ 2724: [Violet 6]蒲公英 [分块 区间众数]

    传送门 题面太美不忍不放 分块分块 这种题的一个特点是只有查询,通常需要预处理:加入修改的话需要暴力重构预处理 预处理$f[i][j]$为第i块到第j块的众数,显然$f[i][j]=max{f[i][ ...

  8. install atom markdown preview plus error

    Installing "markdown-preview-enhanced@0.15.2" failed.Hide output- npm ERR! Darwin 17.2.0 n ...

  9. map,vector 等容器内容的循环删除问题(C++)

    map,vector 等容器内容的循环删除问题(C++) map,vector等容器的循环删除不能用普通的方法删除: for(auto p=list.begin();p!=list.end();p++ ...

  10. 洛谷P3369 【模板】普通平衡树（Treap/SBT）

    洛谷P3369 [模板]普通平衡树(Treap/SBT) 平衡树,一种其妙的数据结构 题目传送门 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除 ...