HTML5之Canvas画圆形
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画圆形的更多相关文章
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- Canvas画圆形
转载:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#圆弧 function d ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 canvas绘制圆形印章，以及与页面交互
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- （转）浅谈HTML5与css3画饼图！
神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- Android逆向之so的半自动化逆向
因为工作需要,转型干android逆向,有几个月了.不过对于so的逆向,任然停留在,难难难的阶段,虽然上次自己还是逆向了一个15k左右的小so文件,但是,那个基本是靠,一步一步跟代码,查看堆栈信息来自 ...
- LearnPython_week2
1. 列表.元组 2. 字典 3. 集合 4. 字符串的各种姿势 5. OPEN文件操作 1. 列表.元组 列表 names = ['wong','caiyun',' ...
- 使用supervisor 进行进程管理时调整最大文件打开数
[supervisord]logfile=/tmp/supervisord.log ; 日志文件,默认是 $CWD/supervisord.loglogfile_maxbytes=50MB ; 日志文 ...
- centos 手动增加swap分区
SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...
- 使用CentOS Linux Bridge搭建Vxlan环境
一. 基础环境使用VmWare虚拟两台Linux机器.CentOS 7,Linux内核如下:4.5.3-1.el7.elrepo.x86_64如果内核版本太低,是不支持VxLan的.可以使用一下命令进 ...
- Dockerfile 中的 CMD 与 ENTRYPOINT
CMD 和 ENTRYPOINT 指令都是用来指定容器启动时运行的命令.单从功能上来看,这两个命令几乎是重复的.单独使用其中的一个就可以实现绝大多数的用例.但是既然 doker 同时提供了它们,为了在 ...
- 【应知应会】15个常用的JavaScript字符串操作方法
1 初始化 //常用初始化方法 var stringVal = "hello iFat3"; //构造函数创建方法 var stringObj = new String(" ...
- 利用ajax获取网页表单数据，并存储到数据库之一（使用JDBC）
所谓JDBC就是利用java与数据库相连接的技术,从数据库获取既有的信息或者把网页上的信息存储到数据库. 这里简单的介绍公司的一个小项目中的一部分,由于代码较多,所以用图片形式进行展示.源码请查看源码 ...
- Android 文件下载三种基本方式
一.自己封装URLConnection 连接请求类 public void downloadFile1() { try{ //下载路径,如果路径无效了,可换成你的下载路径 String url = & ...
- 【Unity3D技术文档翻译】第1.5篇 本地使用 AssetBundles
上一章:[Unity3D技术文档翻译]第1.4篇 AssetBundle 依赖关系 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Devel ...