HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数
实例
创建一个圆形:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
- 中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角:arc(100,75,50,0,1.5*Math.PI)
- 结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值
参数 | 描述 |
---|---|
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
为大家介绍曲线的语法。 如果要创建一个圆形,我们可以使用arc()方法。
语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针)
代码:context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
HTML5 Canvas Arc 说明:
八卦图示例代码:
程序效果如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<!--下面excanvas.js需下载才能在IE下支持canvas-->
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload = function(){
var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d'); //绘制白色半圆的代码如下:
ctx.beginPath();
ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制黑色半圆的代码如下:
ctx.beginPath();
ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制黑色小圆
ctx.beginPath();
ctx.arc(200,240,40,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制白色小圆
ctx.beginPath();
ctx.arc(200,160,40,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制白色小圆心
ctx.beginPath();
ctx.arc(200,160,5,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill(); //绘制黑色小圆心
ctx.beginPath();
ctx.arc(200,240,5,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill(); //绘制文字代码如下:
ctx.save();
ctx.fillStyle="black";
ctx.globalAlpha="0.4";
ctx.textAlign="center";
ctx.font="32px Arial";
ctx.shadowColor="rgba(0,0,0,0.4)";
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=-10;
ctx.shadowBlur=2;
ctx.fillText('Hello Canavs',200,100);//IE不支持 ctx.restore();
}
</script>
</head> <body>
<canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;"></canvas>
</body>
</html>
HTML5 Canvas arc()函数//////////////////////(转)的更多相关文章
- HTML5 Canvas arc()函数
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- HTML5 Canvas Arc Tutorial
HTML5 Canvas Arc Tutorial HTML5 Canvas Arc Tutorial
- Html5 Canvas之arc函数图示详解
在不变换坐标系的情况下,arc函数画弧的方向如下图所示: 举例来说,arc(x,y,r,Math.PI/6,Math.PI/3,false);是以x,y为圆心,r为半径,从x正轴顺时针30度为起始角, ...
- canvas对象arc函数的使用-遁地龙卷风
(-1)写在前面 我用的是chrome49 <canvas id="lol" height="300"></canvas> (1)详细介 ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 简介 jCanvas:当 jQuery遇上HTML5 Canvas
https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
随机推荐
- osg中遇到的问题
osg中遇到的问题 今天写程序的时候, 需要把键盘和鼠标消息转发出来, 就直接写了接口用signal丢出来了. 程序写的很多, 测试的时候却崩溃了.... 在场景中拖拽鼠标左键的时候, 会发现在扔出鼠 ...
- Maven_pom.xml介绍
Maven的pom.xml介绍 6.1 简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId和version ...
- Solr JAVA客户端SolrJ 4.9使用示例教程
http://my.oschina.net/cloudcoder/blog/305024 简介 SolrJ是操作Solr的JAVA客户端,它提供了增加.修改.删除.查询Solr索引的JAVA接口.So ...
- 序列化,反序列化,模拟ATM机
package com.bank.unionpay; //银行卡的接口 public interface I_yinhangka { //抽象方法 //public abstract默认修饰抽象的 p ...
- servlet session 相关
1.session是server维护的一个变量,如果消除每个session?----这里只做指定key的session删除 1.1.显示调用 废除指定key的session session.remov ...
- Odoo 9 Odoo $ JQuery undifned
浏览器处于假死状态,查看console发现 odoo,jquery,$ 未定义三处错误,后台显示IOError: IOError: [Errno 2] No such file or director ...
- 无损破解Android图案密码及原理
作者:http://weibo.com/hellguard 安卓图案密码穷举,秒破gesture.key.图案密码是明文的SHA1,明文取值范围是[00-08],不超过9字节,不重复出现,没有SALT ...
- 文件上传插件 -- plupload
refresh:重新实例化uploader removeFile(id):从file中移除某个文件 splice(start,length):从队列中start开始删除length个文件, 返回被删除 ...
- boostrap折叠,jquery ui accordion同时打开多个标签
http://caibaojian.com/bootstrap/javascript.html http://www.w3cschool.cc/jqueryui/example-accordion.h ...
- EDI - Biztalk Setting
1. Applications: