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. 分布式唯一id：snowflake算法思考

    匠心零度 转载请注明原创出处,谢谢! 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续R ...

  2. SpringMVC源码情操陶冶-AbstractUrlHandlerMapping

    承接前文SpringMVC源码情操陶冶-AbstractHandlerMapping,前文主要讲解了如何获取handler处理对象,本文将针对beanName注册为handler对象作下解析 Abst ...

  3. typeof面试题解答

    面试题 alert(typeof null); // object alert(typeof undefined); // undefined alert(typeof NaN); // number ...

  4. fatal error C1083:无法打开包括文件:“stdint.h”: No such file or directory解决方案

    stdint.h文件是C99的标准头文件,默认情况下VC是不支持的,所以在使用过程中肯定会碰到 "No such file or directory"的问题. 解决办法 1.从网盘 ...

  5. stderr,stdout,a.txt缓冲区别

    #include<stdlib.h>#include<stdio.h>#include<string.h>#include<error.h>#inclu ...

  6. MySQL 存储过程的简单使用

    首先创建一张 students 表 SQL脚本如下: create table students( id int primary key auto_increment, age int, name v ...

  7. 携程Apollo（阿波罗）配置中心用户管理和部门管理

    Apollo是配置管理系统,会提供权限管理(Authorization),理论上是不负责用户登录认证功能的实现(Authentication).所以Apollo定义了一些SPI用来解耦,Apollo接 ...

  8. Ubuntu配置Nginx虚拟主机和支持ThinkPHP

    [Nginx配置虚拟主机] 每一个 server { listen       80;         server_name  www.a.com; ..... } 就表示一台虚拟域名, 然后对应的 ...

  9. Kubernetes 概念整理

    注:以下大部分内容来自网上摘录,以便后期查阅. Kubernetes (通常称为 K8s) 是用于自动部署.扩展和管理容器化(containerized)应用程序的开源系统,是 Google 内部工具 ...

  10. tomcat在centos下的操作

    一 .Tomcat启动与停止 进入Tomcat中bin所在目录 cd /usr/tomcat/bin 启动: ./startup.sh 停止: ./shutdown.sh 平常可以用这个命令来查看to ...