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. 从返回的HTTP Header信息中隐藏Apache的版本号及PHP的X-Powered-By信息

    默认情况下,很多apache安装时会显示版本号及操作系统版本,甚至会显示服务器上安装的是什么样的apache模块.这些信息可以为黑客所用,并且黑客还可以从中得知你所配置的服务器上的很多设置都是默认状态 ...

  2. Ubuntu14.04 命令行下安装teamviewer

    下载teamviewer 链接:https://pan.baidu.com/s/1hs0BppM  密码:sdmk 上传到 /home/[user] cd /home/[user] 移动安装包到 /o ...

  3. BZOJ 3620: 似乎在梦中见过的样子 [KMP 暴力]

    和我签订契约,成为魔法少女吧 题意:求所有形似于A+B+A 的子串的数量 , 且len(A)>=k,len(B)>=1 位置不同其他性质相同的子串算不同子串,位置相同但拆分不同的子串算同一 ...

  4. canvas绘制时钟及注释及save和restore的用法

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

  5. SDN第一次上机作业

    作业链接 用字符命令生成拓扑,并测试连通性,截图 sudo mn --topo tree,fanout=3,depth=2 用可视化界面生成拓扑,并测试连通性,截图 用Python脚本生成一个Fat- ...

  6. 打通MySQL的操作权限

    打通MySQL的操作权限 前面已经总结了<XAMPP的配置与使用>,虽然可以直接通过GUI控制面板去启动MySQL服务,但是有些相关的操作则需要在Windows中的CMD命令窗口中去对My ...

  7. vagrant启动报错The following SSH command responded with a no

    vagrant package打包生成box,以这个box为基础模板,打造vagrant环境,启动vagrant报错 angel:vagrant $ vagrant up Bringing machi ...

  8. 【南京邮电】maze 迷宫解法

    [南京邮电]maze 迷宫解法 题目来源:南京邮电大学网络攻防训练平台. 题目下载地址:https://pan.baidu.com/s/1i5gLzIt (密码rijss) 0x0 初步分析 题目中给 ...

  9. MysqL_SELECT FOR UPDATE详解

    先来举一个在某些应用场景下会出现数据不一致的例子,当然存储引擎是InnoDB(至于为什么,后面再告诉你). 电商平台常见的下单场景: 一般商品表(goods)有基本的四个字段,id(主键),goods ...

  10. CentOS下安装配置cmake

    安装环境:CentOS-6.4   安装方式:源码编译安装  软件:cmake-2.8.5.tar.gz 下载地址暂时不提供,去百度搜一下准有 安装前提 系统中已经安装了gcc. ncurses-de ...