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 ...

随机推荐

Bootstrap_Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
[译]FastClick: native-like tapping for touch apps
原文地址:http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/ 这篇文章是一篇老文了,现在才看到,真是落后啊 ...
asp.net发送邮件
using System.Net.Mail; /// 发送邮件 /// </summary> /// <param name="sender"></p ...
js sort() 排序的问题
默认并非按照大小排序,而是根据Assic来排序的,但接受一个排序函数.所以正确的使用姿势应该是这样的: var arr = [0,1,5,10,15]; function sequence(a,b){ ...
dede新建模型中自定义联动类别调用及修改方法
搜索了好久,没找到一个好的方法,就凑活用这个方法吧.也许只有这个方法比较好先在后台的“联动类别管理”里新增“类别组”,“类别名”填中文,“缓存组名”填英文字母. 在“分类名称”后面增加分类然后 ...
关于oracle的笔记
1.查看一个表暂用的表空间大小: SELECT bytes/1024/1024||'MB',a.*FROM user_segments a WHERE a.segment_name ='TL_SP_N ...
设置mariadb字符集为utf8
我用的是10.0.25 mariadb, 在centos7系统上,用以下指令设置数据库字符集. [client] default-character-set=utf8 [mysql] defa ...
HTTP Error 403没有了，但是中文全都是乱码。又是怎么回事？
首先是简单的网页抓取程序: [python] import sys, urllib2req = urllib2.Request("http://blog.csdn.net/nevasun&q ...

HTML5 Canvas arc()函数//////////////////////(转)