之前的一个微信项目已经要结项了，最近整理一下项目中使用较多的canvas画图方面的知识吧，打算写个3,4篇的样子。本篇主要介绍基础操作和弧线画法。

之后再写一下趋势图，直方图，文本图像处理的。

言归正传，canvas元素本身是一个容器元素，提供一块画布，用脚本来实现想要画什么。为了演示使用，我们新增一个空的aspx页。

首先，我们新增一个canvas元素：

  1.     <canvas id="myConvas" style="display:block; margin: 0 auto;">
  2.     </canvas>

style="display:block; margin: 0 auto;"作用在于使画布作为一个块元素居中。

canvas元素默认的尺寸是300（宽）*150（高），可以通过CSS来改变尺寸，例如style=" width:400px; height:300px;"

*: 改变尺寸不同浏览器有可能会导致图像拉伸，下面会有例子说明。

然后我们获取画布对象：

  1.     var convas = document.getElementById("myConvas");//获取画布对象
  2.     var ctx = convas.getContext("2d");//对2D平面函数库的声明，以后可以支持绘制3D图形

常用的画布元素支持的函数，下面列举一些：

函数　　　　　　 描述
 beginPath()  开始新路径
 moveTo()  设置路径的起始位置
 LineTo()  定义从当前位置开始的直线
 arc()　　　　　　  定义弧　　
 arcTo()  定义从当前位置开始的弧线
 closePath()  结束路径
 stroke()  勾画路径

canvas内置的绘图形状之前只有矩形：

  1.     ctx.fillStyle = "red"; //fillStyle属性用来设置矩形的填充颜色。不上色则默认黑色
  2.     ctx.fillRect(, , , ); //方法用来绘制实心矩形,4个参数分别代表画布起始点坐标X,Y,矩形宽度，矩形高度
        //ctx.strokeRect(50, 50, 200, 100); //用来绘制空心矩形，参数同上
        //ctx.clearRect(50, 50, 80, 50);//用来清除某个矩形区域的内容,参数同上

3个方法效果图分别如下：

而实际应用中，我们由于审美等的要求，可能会需要圆角矩形。画圆角则涉及到画圆和圆弧的方法：

arc(x,y,radius.startAngle,endAngle,anticlockwise);六个参数中：x和y参数是圆心坐标，radius是半径，

startAngle和endAngle则是圆弧的起始角度和终止角度（以弧度表示范围为0-2π），圆心正右方点为0弧度，支持负的弧度。

anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）,默认顺时针。

假如我们要花一个左上端点为（x,y）宽w,高h的圆角矩形,首先如果是非圆角矩形，那么四个顶点坐标应该为（{x,y}，{x+w,y}，{x,y+h}，{z+w,y+h}）

改为圆角之后，应该是由4条线段和4段（π/2）的弧组成，我们假定画弧时候半径为R（R<w/2）&&（R<h/2）那么我们便可计算出：

左上角的2个端点{x,y+R},{x+R,y},弧线弧度为3/2π至2π ,弧线圆心坐标{x+R,y+R}

右上角的2个端点{x+w-R,y},{x+w,y+R},弧线弧度为0至1/2π,弧线圆心坐标{x+w-R,y+R}

右下角的2个端点{x+w,y+h-R},{x+w-R,y+h},弧线弧度为1/2π至π,弧线圆心坐标{x+w-R,y+h-R}

左下角的2个端点{x+r,y+h},{x,y+h-R},弧线弧度为π至3/2π,弧线圆心坐标{x+R,y+h-R}

计算完毕，开始画，代码及注释如下：

  1.     var convas = document.getElementById("myConvas");
  2.     var ctx = convas.getContext("2d");
  3.  
  4.     rectangle(ctx, , , , , );
  5.  
  6.     //非圆角是矩形左上角端点坐标（x,y,宽w,高h,圆角半径r）
  7.     function rectangle(ctx, x, y, w, h, R) {
  8.         //ctx.moveTo(x, y + R);//开始点,画圆弧时可以不设置起点，因为通过方法控制
  9.         ctx.arc(x + R, y + R, R, Math.PI, Math.PI *  / );//画左上角圆弧
  10.         ctx.arc(x + w - R, y + R, R, Math.PI *  / , Math.PI * ); //画右上角圆弧,*当开始新画且未移动画笔时，自动连接上次画的结束点和本次起点为直线
  11.         ctx.arc(x + w - R, y + h - R, R, , Math.PI / ); //画右下角圆弧,*同上
  12.         ctx.arc(x + R, y + h - R, R, Math.PI / , Math.PI); //画左下角圆弧，*同上
  13.         ctx.lineTo(x, y + R);//画左下角至左上角直线闭合矩形
  14.         ctx.strokeStyle = "red"; //对线条上色,不设置则默认黑色，该方法需放在stroke()方法之前
  15.         ctx.lineWidth = ; //设置线条宽度,不设置默认1，该方法需放在stroke()方法之前
  16.         ctx.stroke(); //勾画路径，此时才会显示线条
  17.     }

效果图如下：

事实上，画弧线我们也可以使用arcTo()方法来实现，这个方法对比上面那种通过计算圆心-画弧线，明显简单很多，所以圆角矩形一般使用arcTo来画

arcTo(x1,y1,x2,y2,radius),5个参数分别代表第一个点的坐标(x1,y1),第二个点的坐标(x2,y2),半径radius。

这个方法我测试了一段时间之后才明白它的意思，涉及到一个起始坐标，

1,从起始点坐标到第一个点，一条直线

2,从第一个点到第二个点，一条直线

3,2条直线必然相交（夹角显然不能为0，不然说不下去了-。-）

4,画一段圆弧，半径为randius的圆弧，与两条直线都相切！（或者延长线*j就是线段太短无法相切，所以我们去找延长线）

对照图片来说，

我们首先画了3个矩形（宽80，高100），然后分别让矩形左上角作为起始点，右上角作为第一个点，右侧直线上任选一点作为第二个点（2点确定直线。。。这个点很随意选）

半径分别为50,20,100.

前两附图都是先走直线然后弧线，第三附图是先走反向直线（及先画了反向延长线），再画圆弧来保证相切。

示例代码如下：

  1.     //画3个矩形
  2.     ctx.strokeRect(, , , )
  3.     ctx.strokeRect(, , , )
  4.     ctx.strokeRect(, , , )
  5.     //画第一条弧线
  6.     ctx.moveTo(, );
  7.     ctx.arcTo(, , , , );
  8.     //画第二条弧线
  9.     ctx.moveTo(, );
  10.     ctx.arcTo(, , , , );
  11.     //画第三条弧线
  12.     ctx.moveTo(, );
  13.     ctx.arcTo(, , , , );
  14.     ctx.strokeStyle = "red"; //对线条上色,不设置则默认黑色，该方法需放在stroke()方法之前
  15.     ctx.stroke();

看到这里就应该明白使用arcTo()画圆角比arc()简单很多了吧~先难后易的讲法楼主自己也是感觉醉了，

这篇写了这么多基础介绍，下面写一个实际的小应用示例来收尾吧！

我们来实现在网页插入头像图片，环绕头像图片画一定宽度弧线作为能量槽，  随时间变化弧线一小段一小段变色。

实现思路呢：

1，定义好一个图片位置，定义画布位置，环绕图片画一定宽度弧线，上底色

2，定义延时自动执行的函数，每隔一定时间新画一段新的圆弧，上色，覆盖底色

3，覆盖完毕，延时函数不再调用自身。

实现意义呢：

1，我们画图往往通过覆盖来实现页面，为下一篇画直方图等做铺垫

2，这个画图可以通过ajax等获取后台数据源绑定，并定时刷新图的趋势体现数据。

下面先贴上代码注释和效果图片，把下面代码拷贝到VS一个aspx页面，然后右键浏览器查看也能看到效果。

图片之后，文章末尾会总结一下易出错点。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Canvas.aspx.cs" Inherits="Canvas" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head id="Head1" runat="server">
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <img src="http://p2.wmpic.me/article/2014/09/29/1411980934_pnKerJNu.png" style="display: block; margin: 0 auto;" />
  10.     <canvas id="myConvas" style="display: block; margin: 0 auto; position: absolute;
  11.         top: 5px; left: 500px; width: 500px; height: 250px;">
  12.     </canvas>
  13. </body>
  14. <script type="text/javascript">
  15.     var convas = document.getElementById("myConvas");
  16.     var ctx = convas.getContext("2d");
  17.     //ctx.fillStyle = "red"; //fillStyle属性用来设置矩形的填充颜色。
  18.     //ctx.fillRect(50, 50, 200, 100); //方法用来绘制矩形,4个参数分别代表画布起始点坐标X,Y,矩形宽度，矩形高度
  19.     //ctx.strokeRect(50, 50, 200, 100); //用来绘制空心矩形，参数同上。
  20.     //ctx.clearRect(50, 50, 80, 50);//用来清除某个矩形区域的内容,参数同上。
  21.     //rectangle(ctx, 50, 50, 200, 80, 10);
  22.     //画3个矩形
  23.     //    ctx.strokeRect(10, 50, 80, 100)
  24.     //    ctx.strokeRect(110, 50, 80, 100)
  25.     //    ctx.strokeRect(210, 50, 80, 100)
  26.     //    //画第一条弧线
  27.     //    ctx.moveTo(10, 50);
  28.     //    ctx.arcTo(90, 50, 90, 80, 50);
  29.     //    //画第二条弧线
  30.     //    ctx.moveTo(110, 50);
  31.     //    ctx.arcTo(190, 50, 190, 80, 20);
  32.     //    //画第三条弧线
  33.     //    ctx.moveTo(210, 50);
  34.     //    ctx.arcTo(290, 50, 290, 80, 100);
  35.     //    ctx.strokeStyle = "red"; //对线条上色,不设置则默认黑色，该方法需放在stroke()方法之前
  36.     //    ctx.stroke();
  37.  
  38.     //先画一层红色底色
  39.     ctx.beginPath();//路径开始
  40.     ctx.arc(, , , Math.PI * 1.7, Math.PI * 1.3, false);//画圆弧，从图片正上方偏右画到正上方偏左
  41.     ctx.lineWidth = ;//设置线宽
  42.     ctx.strokeStyle = "red";//上红色
  43.     ctx.stroke();//画出路径
  44.     ctx.closePath();//结束路径
  45.     //点击图片上蓝色
  46.     var count = ;
  47.     //延时函数执行，每次覆盖0.1* PI红色，变一段为黄色，直至覆盖完毕，我们将弧线分成16份
  48.     alarmWaiting(count);
  49.     function alarmWaiting(count) {
  50.         count++;
  51.         //每次执行多覆盖0.1，共执行16次
  52.         if ((count > ) && (count < )) {
  53.  
  54.             //计算出本次覆盖结束的弧度
  55.             var end = (1.7 + (count - ) * 0.1) >= 2.0 ? (1.7 + (count - ) * 0.1) - 2.0 : (1.7 + (count - ) * 0.1);
  56.             //移动至图片正上方偏右位置起始点坐标
  57.             ctx.moveTo( +  * Math.cos(Math.PI * 1.7),  +  * Math.sin(Math.PI * 1.7));
  58.             ctx.beginPath();
  59.             //画黄色弧线覆盖红色
  60.             ctx.arc(, , , Math.PI * 1.7, Math.PI * end, false);
  61.             ctx.lineWidth = ;
  62.             ctx.strokeStyle = "yellow";
  63.             ctx.stroke();
  64.             ctx.closePath();//结束
  65.         }
  66.         if (count < ) {
  67.             //小于20，（即圆弧分为16份），每次隔2000ms(2秒后)执行调用function () { alarmWaiting(count) }匿名方法。count为19时全部覆盖为黄色
  68.             setTimeout(function () { alarmWaiting(count) }, );
  69.         }
  70.     }
  71.  
  72.     //非圆角是矩形左上角端点坐标（x,y,宽w,高h,圆角半径r）
  73.     function rectangle(ctx, x, y, w, h, R) {
  74.         //ctx.moveTo(x, y + R);//开始点,画圆弧时可以不设置起点，因为通过方法控制
  75.         ctx.arc(x + R, y + R, R, Math.PI, Math.PI *  / ); //画左上角圆弧
  76.         ctx.arc(x + w - R, y + R, R, Math.PI *  / , Math.PI * ); //画右上角圆弧,*当开始新画且未移动画笔时，自动连接上次画的结束点和本次起点为直线
  77.         ctx.arc(x + w - R, y + h - R, R, , Math.PI / ); //画右下角圆弧,*同上
  78.         ctx.arc(x + R, y + h - R, R, Math.PI / , Math.PI); //画左下角圆弧，*同上
  79.         ctx.lineTo(x, y + R); //画左下角至左上角直线闭合矩形
  80.         ctx.strokeStyle = "red"; //对线条上色,不设置则默认黑色，该方法需放在stroke()方法之前
  81.         ctx.lineWidth = ; //设置线条宽度,不设置默认1，该方法需放在stroke()方法之前
  82.         ctx.stroke(); //勾画路径，此时才会显示线条
  83.     }
  84. </script>
  85. </html>

效果图片如下：

在这个小页面的实现过程中，有以下几点需要注意下：

1,  position: absolute;top: 5px; left: 500px; 这个定位，当上级元素没有position时候，使用absolute按浏览器左上角为（0.0）绝对定位，

如果不加这个的话，你会发现图片和画布无法重叠。（2者并列关系，其实画布也可以导入图片并编辑）

2, 关于匿名方法，setTimeout(function () { alarmWaiting(count) }, 2000)；这段当调用函数没有实参时候可以写成setTimeout( alarmWaiting() , 2000)；

但是有实参时候 写成setTimeout( alarmWaiting(count) , 2000)；是错误的，你会发现没有延时2秒执行，而是执行所有遍数没有延时，这是或许是因为

alarmWaiting(count)无 法被转化识别为付出function ()，导致系统立即执行alarmWaiting希望得到返回一个function ()但是！失败，达不到相应的效果

3，圆周上的点根据弧度计算坐标，这个就不细说了，注意到是0度是正右方，而我们实际绘图往往以正上方为起点，即1.5*PI或者是-0.5*PI

4,如上条所说，支持负的弧度运算等价于加2*PI的倍数换算为的正弧度

5，beginPath()和closePath();开始和结束路径，如果你想做覆盖图形，上一个图形一定要先结束！！！然后再开始下一个覆盖，“亲身踩过的雷，默泪！”

6，关于画布上的点点击事件，可以通过计算来触发，（需要注意到是换算像素点要考虑浏览器和下拉条），之前有个方法回头我再补上吧，

好吧，凌晨1点半了，睡了that‘s  all~

HTML5 Canvas绘图系列之一：圆弧等基础图形的实现的更多相关文章

  1. HTML5 Canvas绘图如何使用

    --------------复制而来--原地址http://jingyan.baidu.com/article/ed15cb1b2e642a1be369813e.html HTML5 Canvas绘图 ...

  2. HTML5 canvas绘图基本使用方法

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCon ...

  3. HTML5 canvas绘图

    HTML5 canvas画图 示例 ------- <!DOCTYPE html> <head> <meta charset="UTF-8"> ...

  4. HTML5 canvas绘图基础（电子名片生成器源码）

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  5. HTML5 Canvas绘图基础

  6. HTML5 Canvas游戏开发（一）基础知识

    一.绘制基本图形 在每次用canvas画布时,都有几步是“套路” 1.在HTML中创建Canvas画布: <canvas id="mycanvas" width=" ...

  7. HTML5 Canvas绘图详解 drawImage() 方法 有图有真相！

    步骤 1 2 3 4 5   简介 是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做简单的(和不那么简单的)动画. ...

  8. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

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

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

随机推荐

  1. c++ 友元类

    一.友元类相关概念 要将私有成员数据或函数暴露给另一个类,必须将后者声明为友元类. 注意三点: (1)友元关系不能传递 (2)友元关系不能继承 (3)友元关系不能互通

  2. Mysql数据库乱码与编码问题筛查

    最近接连遇到数据库编码问题,让你的系统本来像个美丽的姑娘却忽然发现她不识字一样难受,其实很多时候是编码的问题,而mysql(特别地)设计编码的地方很多,在这里做一个筛查: 1 mysql编码 用下面的 ...

  3. 《Java程序员面试笔试宝典》之为什么Java中有些接口没有任何方法

    由于Java不支持多重继承,即一个类只能有一个父类,为了克服单继承的缺点,Java语言引入了接口这一概念.接口是抽象方法定义的集合(接口中也可以定义一些常量值),是一种特殊的抽象类.接口中只包含方法的 ...

  4. c++之 常用类型

    C/C++常用类型的范围 C/C++里常用的类型及表示范围如下表所示: 类型 sizeof 表示范围 说明 char 1 -128 - 127 -2^7 - (2^7 - 1) short 2 -32 ...

  5. 制作nginx的rpm包出现问题

    在学习打包rpm,找到了个不错的参考站点  https://src.fedoraproject.org/cgit/rpms/ 过程: git clone -b el6 git://pkgs.fedor ...

  6. ArcGIS Runtime SDK for Android开发之调用GP服务（异步调用）

    一.背景说明 通过调用GP服务,Android客户端也能实现专业的.复杂的GIS分析处理功能,从而增加应用的实用价值. ArcGIS Server发布的GP服务,分为同步和异步两种类型,一般执行步骤较 ...

  7. iOS绘图教程

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,翻译版本中加入了一些书中未涉及到的内容.希望本文能够对你有所帮助.(本文由海水的味道翻译整理,转载请 ...

  8. Linux UGO和ACL权限管理

    自主访问控制(Discretionary Access Control, DAC)是指对象(比如程序.文件.进程)的拥有者可以任意修改或者授予此对象相应的权限.Linux的UGO(User, Grou ...

  9. 怎么修改placeholder字体的css样式

    修改palceholder内文字的css样式 ::-webkit-input-placeholder{ color: red; font-size: 20px; line-height: 50px; ...

  10. ASP.NET 导出Excel文档

    System.IO.TextWriter writer = new System.IO.StreamWriter(Server.MapPath("/provprice.xls"), ...