来源：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. java：打包

    包名命名规范: 1.包名全部小写 2.包名一般情况下是域名的倒过来写+个性命名,如:tinyphp.com,就写成com.tinyphp+.xxx 打包方法 package + 包名 package ...

  2. WCF入门（二）-----实战开发

    在这个实战中我们将使用DataContract,ServiceContract来构建WCF服务,并使用VS2008内置的“WCFSVCHost”运行我们创建的WCF服务,并使用“WCF测试客户端”来测 ...

  3. apns-http2-php，苹果push升级到http2

    最近公司push推送升级,用苹果http2进行推送,http2的好处就不说了,这些网上都可以查到,但是真正在项目中用的,用php写的还是特别少,因此,写出来跟大家分享,废话不说了,直接上代码: pus ...

  4. POJ 2449 A*+SPFA

    A*算法求第k短路流程: 1)计算h[],即当前点到t的估计值 若为有向图,建立反向图求出h[].若为无向图,可直接求解h[].可通过SPFA求解. 2)A*搜索 每次找到新节点就直接加入队列,计算出 ...

  5. bzoj1063

    仔细观察可以发现,这个规划路径很像树链剖分 树链剖分的经典定理:任意一个点到根的所经过轻边不超过logn 而这个规划路径所走公路相当于轻边,也就是说,不便利度不会很大 那么直接dp即可,设f[x,i, ...

  6. VB获取浏览器版本

    String userAgent; userAgent = Request.UserAgent; ) { // The browser is Microsoft Internet Explorer V ...

  7. bzoj3275: Number

    最小割...然后推一下可知不能的情况必定为一奇一偶,于是s->奇->偶->t.跑最小割即可. #include<cstdio> #include<cstring&g ...

  8. BZOJ_1628_[Usaco2007_Demo]_City_skyline_(单调栈)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1628 给出\(n\)个距形的影子,问最少是多少个建筑的?(建筑的影子可以重叠). 分析 用单调 ...

  9. REVOKE DBA权限要小心

      REVOKE DBA权限要小心 转载:http://blog.csdn.net/lwei_998/article/details/6133557 发现某些用户有DBA权限的时候,为了安全,一般我们 ...

  10. vs2010 js代码折叠

    方法一:插件   在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 但是已经有VS2010扩展支持这个功能,它就是--JSEn ...