实例

创建一个圆形：

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>

canvas画布——画八卦图的更多相关文章

  1. 用canvas画布画一个画板

    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...

  2. [html5] canvas 绘图：八卦图

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  4. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  5. konva canvas插件写雷达图示例

    最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中:Konva canva ...

  6. canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能

    写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...

  7. 使用canvas 代码画小猪佩奇

    最近不是小猪佩奇很火嘛!!! 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇,  顿时想学 ,可是 自己 没学过python(自己就好爬爬图片,,,,几个月没用 又丢了) 然后 就想画一个 ...

  8. canvas画布基本知识点总结

    HTML5的canvas元素使用JavaScript画图: <canvas width="600" height="400"> </canva ...

  9. Matplotlib——第一章轻松画个图

    首先安装matplotlib,使用pip install matplotlib.安装完成后在python的命令行敲入import matplotlib,如果没问题,说明安装成功可以开始画图了. 看好了 ...

随机推荐

  1. H5新特性-----WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  2. Apache Flume

    An Event is a unit of data that flows through a Flume agent. The Event flows from Source to Channel  ...

  3. 《ArcGIS Runtime SDK for Android开发笔记》——（15）、要素绘制Drawtools3.0工具DEMO

    1.前言 移动GIS项目开发中点线面的要素绘制及编辑是最常用的操作,在ArcGIS Runtime SDK for iOS 自带AGSSketchLayer类可以帮助用户快速实现要素的绘制,图形编辑. ...

  4. CompletionService的异常处理

    一.采用take()方法时发生异常 示例代码: 情况一:异常比另一个正确任务,较晚出现,正确任务的结果会打印出 import java.util.concurrent.Callable; import ...

  5. js 时间特效

    http://example.com:1234/test.htm#part2:Hash的作用. http://www.cnblogs.com/Interkey/p/RunAsAdmin.html

  6. YUV数据详解

    http://www.cnblogs.com/azraelly/archive/2013/01/01/2841269.html YUV格式有两大类:planar和packed.对于planar的YUV ...

  7. ring0 关于SSDTHook使用的绕过页面写保护的原理与实现

    原博:http://www.cnblogs.com/hongfei/archive/2013/06/18/3142162.html 为了安全起见,Windows XP及其以后的系统将一些重要的内存页设 ...

  8. Orchard Core 文档翻译 （五）自动路由 Autoroute (OrchardCore.Autoroute)

    Autoroute (OrchardCore.Autoroute) 此模块允许您为内容项指定自定义URL(永久链接 permalink). Autoroute Part 将此部分附加到内容类型以指定内 ...

  9. 如何查找Fiori UI上某个字段对应的后台存储表的名称

    今天微信群里有朋友问到这个问题. 如果是SAPGUI里的事务码,比如MM01,对于开发者来说这个任务非常容易完成. 比如我想知道下图"Sales Unit"这个字段的值到底保存在哪 ...

  10. python入门22 pymssql模块（python连接sql server查询）

    安装 pip install pymssql 连接数据库 pymssql.connect() # coding:utf-8 import pymssql server = '192.168.8.1' ...