来源：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. *[hackerrank]Jim Beam

    https://www.hackerrank.com/contests/infinitum-aug14/challenges/jim-beam 学习了线段相交的判断法.首先是叉乘,叉乘的几何意义是有向 ...

  2. 应用程序出现挂死，.NET Runtime at IP 791F7E06 (79140000) with exit code 80131506.

    工具出现挂死问题 1.问题描述 工具出现挂死问题,巡检IIS发现以下异常日志 现网系统日志: 事件类型:    错误 事件来源:    .NET Runtime 描述: Application: Di ...

  3. VCL ActiveX 播放视频

    播放网络视频 string[] options = new string[] { ":sout=#duplicate{dst=display} :no-overlay" }; st ...

  4. C++：对象的初始化和构造函数

    对象的初始化和构造函数 构造函数:是一种特殊的成员函数,它主要用于为对象分配空间,进行初始化.构造函数 的名字必须与类名相同,它不要用户来调用,而是在建立对象时自动执行的 形式一: 类名 对象名(实参 ...

  5. android sqlite支持的数据类型

    Sqlite3支持的数据类型 :NULL.INTEGER.REAL.TEXT.BLOB 但实际上,sqlite3也接受如下的数据类型:    smallint 16 位元的整数.    interge ...

  6. java类的加载以及初始化顺序

    类的加载和初始化的了解对于我们对编程的理解有很大帮助,最近在看类的记载方面的问题.从网上查阅了若干文章,现总结如下: 我们通过一段代码来了解类加载和初始化的顺序: package com.classl ...

  7. JasperReports+iReport打印为excel表头重复问题解决

    iReport版本:3.7.4 解决方法很简单,无奈我就是纠结了一个多小时... 首先,点击文件根目录 移到  属性 框里面,找到Ignore pagination项,勾上,忽略分页,一切就OK了.

  8. tc 2014 college tour 250 500

    题意: You are given a long long n. Return the largest divisor of n that is a perfect square. That is, ...

  9. uva580Critical Mass

    递推.   用f[i]代表i个盒子的放法,设g[i]=2^n-f[i],代表i个盒子不满足条件的放法. 枚举第一个U所在的位置j.则方法有g[j-2]*(2^(i-j-2))种,j-1必须是L. 所以 ...

  10. fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭

    在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...