来源：http://www.ido321.com/968.html

一、Canvas的基础知识

Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。

在页面放置canvas元素很简单，利用<canvas>标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~

二、Canvas小案例（测试结果来自Google最新版本）

1、绘制矩形

canvas.html:

   1: <!DOCTYPE >
   2: <html>
   3: <head>
   4: <meta charset="utf-8">
   5: <title>canvas元素学习</title>
   6: <script type="text/javascript" src="canvas.js">
   7: </script>
   8: </head>
   9: <body>
  10:     <h3>canvas元素学习</h3>
  11:     <canvas id="canvas" width="400" height="300"></canvas>
  12: </body>
  13: </html>

canvas.js:

   1: window.onload=function()
   2: {
   3:     // 获取canvas 的ID
   4:     var canvas = document.getElementById('canvas');
   5:     if (canvas == null)
   6:     {
   7:         return false;
   8:     }
   9:     // 获取上下文
  10:     var context = canvas.getContext('2d');
  11:     // 设置填充的样式
  12:     context.fillStyle = "#eeeeff";

13: // 绘制矩形,以fillStyle填充，fillRect（strokeRect）前两个参数是矩形左上角位置,后两个参数分别是宽和高

//默认原点是canvas的左上角

  14:     context.fillRect(0,0,400,300);
  15:     context.fillStyle = 'red';
  16:     // 设置边框的样式
  17:     context.strokeStyle = 'blue';
  18:     // 设置边框大小
  19:     context.lineWidth = 2;
  20:     context.fillRect(50,50,100,100);
  21:     // 绘制矩形边框
  22:     context.strokeRect(50,50,100,100);
  23: }

效果：

2、绘制圆形：使用路径绘制

   1: // 获取canvas 的ID
   2:     var canvas = document.getElementById('canvas');
   3:     if (canvas == null)
   4:     {
   5:         return false;
   6:     }
   7:     // 获取上下文
   8:     var context = canvas.getContext('2d');
   9:     // 设置填充的样式
  10:     context.fillStyle = "#eeeeff";
  11:     // 绘制矩形,以fillStyle填充
  12:     context.fillRect(0,0,400,300);
  13:     for(var i = 0; i<9; i++)
  14:     {
  15:         // 创建路径
  16:         context.beginPath();
  17:         // 绘制圆形路径
  18:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
  19:         // 关闭路径，如果不关闭，则图像会重叠
  20:         context.closePath();
  21:         context.fillStyle = 'rgba(255,0,0,0.25)';
  22:         // 以fillStyle填充
  23:         context.fill();
  24:     }

arc()绘制圆弧，其参数如下

arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y 是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧 度），anticlockwise是一个布尔值，true表示顺时针绘制图像，false表示逆时针绘制。起始角度是0，结束角度是360（PI*2）就 可以绘制圆形。

效果：

3、绘制直线

绘制直线用到moveTo()和lineTo()两个方法

   1: // 获取canvas 的ID
   2:     var canvas = document.getElementById('canvas');
   3:     if (canvas == null)
   4:     {
   5:         return false;
   6:     }
   7:     // 获取上下文
   8:     var context = canvas.getContext('2d');
   9:     // 设置填充的样式
  10:     context.fillStyle = "#eeeeff";
  11:     // 绘制矩形,以fillStyle填充
  12:     context.fillRect(0,0,400,300);

13: context.beginPath();

//参数线的起点坐标

14: context.moveTo(50,50);

//参数线的终点坐标

  15:     context.lineTo(100,100);

16: context.closePath();

//关闭路径之后绘制图形

  17:     context.strokeStyle = 'red';
  18:     context.stroke();

效果：

绘制一个复杂点的

   1: // 获取canvas 的ID
   2:     var canvas = document.getElementById('canvas');
   3:     if (canvas == null)
   4:     {
   5:         return false;
   6:     }
   7:     // 获取上下文
   8:     var context = canvas.getContext('2d');
   9:     // 设置填充的样式
  10:     context.fillStyle = "#eeeeff";
  11:     // 绘制矩形,以fillStyle填充
  12:     context.fillRect(0,0,400,300);
  13:     var dx = 150;
  14:     var dy = 150;
  15:     var s  = 100;
  16:      // 创建路径
  17:      context.beginPath();
  18:      context.fillStyle = 'rgb(100,255,100)';
  19:      context.strokeStyle = 'rgb(0,0100)';
  20:      var x = Math.sin(0);
  21:      var y = Math.cos(0);
  22:      var dig = Math.PI/15 *11;
  23:      for (var i = 0; i < 30; i++) {
  24:          var x = Math.sin(i * dig);
  25:          var y = Math.cos(i * dig);
  26:          context.lineTo(dx+x*s,dx+y*s);
  27:      }
  28:      context.closePath();
  29:      context.fill();
  30:      context.stroke();

效果：

4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线

bezierCurveTo可以绘制曲线，是lineTo的曲线版本

   1: // 获取canvas 的ID
   2:     var canvas = document.getElementById('canvas');
   3:     if (canvas == null)
   4:     {
   5:         return false;
   6:     }
   7:     // 获取上下文
   8:     var context = canvas.getContext('2d');
   9:     // 设置填充的样式
  10:     context.fillStyle = "#eeeeff";
  11:     // 绘制矩形,以fillStyle填充
  12:     context.fillRect(0,0,400,300);
  13:     var dx = 150;
  14:     var dy = 150;
  15:     var s  = 100;
  16:      // 创建路径
  17:      context.beginPath();
  18:      context.fillStyle = 'rgb(100,255,100)';
  19:      context.strokeStyle = 'rgb(0,0100)';
  20:      var x = Math.sin(0);
  21:      var y = Math.cos(0);
  22:      var dig = Math.PI/15 *11;
  23:      context.moveTo(dx,dy);
  24:      for (var i = 0; i < 30; i++) {
  25:          var x = Math.sin(i * dig);
  26:          var y = Math.cos(i * dig);
  27:          context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
  28:      }
  29:      context.closePath();
  30:      context.fill();
  31:      context.stroke();

效果

下一篇：Canvas入门（2）:图形渐变和图像形变换

Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形的更多相关文章

  1. Canvas入门04-绘制矩形

    使用的API: ctx.strokeRect(x, y, width, height) 给一个矩形描边 ctx.fillRect(x, y, width, height) 填充一个矩形 ctx.cle ...

  2. Android中使用Canvas和Paint绘制一个安卓机器人

    场景 在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤 首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

  3. IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    ... 首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Con ...

  4. (转) IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...

  5. [置顶] IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context ...

  6. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  7. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  8. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  9. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

随机推荐

  1. C语言命名规则

    一.程序风格:          1.严格采用阶梯层次组织程序代码:          各层次缩进的分格采用VC的缺省风格,即每层次缩进为4格,括号位于下一行.     要求相匹配的大括号在同一列,对 ...

  2. Swift入门（十一）——类型转换与is、as操作

    三种操作:is.as?和as! Swift是强类型语言,但也允许开发者通过is.as?和as!这三种操作来对类型进行判断和强制转换.其中is用作类型判断,而as?和as!则分别是类型转换的可选形式和强 ...

  3. ASP.NET获取路径的方法

    原文:[转载]ASP.NET获取路径的方法 HttpContext.Current.Request.PhysicalPath;    // 获得当前页面的完整物理路径.比如 F:\XFU.NSQS\p ...

  4. sdut 2934 人活着系列之平方数 (完全背包变形)

    题目链接 分析:完全背包的变形,每一层的d[]数组代表这一层的这个数新加入以后所构成的val的种类. #include <iostream> #include <cstdio> ...

  5. poj 1905 Expanding Rods (数学 计算方法 二分)

    题目链接 题意:将长度为L的棒子卡在墙壁之间.现在因为某种原因,木棒变长了,因为还在墙壁之间,所以弯成了一个弧度,现在求的是弧的最高处与木棒原先的地方的最大距离. 分析: 下面的分析是网上别人的分析: ...

  6. 函数lock_rec_get_first

    /*********************************************************************//** Gets the first explicit l ...

  7. class ha_innobase: public handler

    /** The class defining a handle to an Innodb table */ class ha_innobase: public handler { row_prebui ...

  8. SQL千万级数据设计和优化

    1. 数据太多.放在一个表肯定不行. 比如月周期表.一个月1000万,一年就1.2亿,如此累计下去肯定不行的.所以都是基于一个周期数据一个表.甚至一个周期数据就要分几个分表.主要是考虑实际的数据量而定 ...

  9. Androidstudio下Generate signed apk提示Error: Expected resource of type id [ResourceType]解决办法

    只需要在报错位置所在的类上面添加: @SuppressWarnings("ResourceType") 即可实现Generate signed apk.

  10. RPi 2B Raspbian system install

    /***************************************************************************** * RPi 2B Raspbian系统安装 ...