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. 洛谷 [P2024] 食物链

    并查集 这是一道比较特殊的并查集,开一个三倍的数组, 1-n保存同类,n-n×2保存猎物,n2~n3保存天敌: #include <iostream> #include <cstdi ...

  2. HDU 4333 Revolving Digits [扩展KMP]【学习笔记】

    题意:给一个数字,每一次把它的最后一位拿到最前面,一直那样下去,分别求形成的数字小于,等于和大于原来数的个数. SAM乱搞失败 当然要先变SS了 然后考虑每个后缀前长为n个字符,把它跟S比较就行了 如 ...

  3. 关于node的基础理论，书上看来的

    最近看了一本书,说了一些Node.js的东西,现在来记录一下,让自己记得更牢靠一点. 在书上,是这样介绍的:Node.js模型是源于Ruby的Event Machine 和 Python的Twiste ...

  4. netty学习资源收集

    Netty学习笔记 Netty In Actions CSDN专栏 一起学Netty-CSDN专栏 Netty In Action中文版

  5. css 图片增加模糊效果

    img{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }

  6. 在一台电脑上运行两个或两个以上的tomcat

    前言 在开发过程中,我们可能会同时用到多个tomcat,但以正常安装的形式安装多个tomcat,无论启动哪一个tomcat,打开的都是配置了环境变量的那一个tomcat,所以进行一些设置,以达到我们同 ...

  7. 工作笔记--自动切换host的python code

    修改host代码: #coding:utf-8import os,timepwd = os.path.dirname(__file__) #获取当前文件夹的绝对路径pull_host_cmd = 'a ...

  8. Mysql(二)：库操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  9. 在gitlab上面创建私有库

    一.创建私有库1.使用xcode建立新的工程,选择Cocoa Touch Static Library,取名为podTest   WechatIMG1172.jpeg 2.创建一个类PodTest,给 ...

  10. 将Tomcat配置到你的mac电脑上，命令行启动tomcat

    1.下载tomcat7文件 2.编辑打开.bash_profile vim .bash_profile 3.在该文件最后面添加(CATALINA_HOME为tomcat解压目录) CATALINA_H ...