来源：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. 浅谈SQL语句优化经验

    (1) 选择最有效率的表名顺序(只在基于规则的seo/' target='_blank'>优化器中有效):ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后 ...

  2. C和指针贴图

    ANSI C 算术转换 内存操作函数 打开流 关闭流 IO函数常用模式 字符输入函数 字符输出函数 撤销字符 未格式化的行IO 格式化的行IO-scanf家族 格式化IO-printf家族 print ...

  3. Generic repository pattern and Unit of work with Entity framework

    原文 Generic repository pattern and Unit of work with Entity framework Repository pattern is an abstra ...

  4. C++：构造函数的重载

    构造函数的重载的判断条件是:参数的个数或者类型不同,其他要保持一样 举例说明: 方式一:在类中声明重载构造函数,在类外定义 //第一种方法: #include<iostream> usin ...

  5. 纯后台生成highcharts图片有哪些方法?

    比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...

  6. RestTemplateIntegrationTests

    摘录RestTemplate的集成测试类/* 2.    * Copyright 2002-2010 the original author or authors. 3.    * 4.    * L ...

  7. firebug的使用方法和技巧(web开发调试工具)

    Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功 能,使用起来非常方便,而且在各种浏览器下都能使用(IE ...

  8. npm安装插件提示

    现在使用node的人群越来越多,咱也不能落后,得跟紧脚步才行. 今天使用 npm 安装插件的时候,出现以下提示,而且,安装程序看着好像终止了.而且,看到一个exit单词,就认为说安装出错了. $ np ...

  9. sdut 2819 比赛排名(边表 拓扑排序)

    题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2819 #include <iost ...

  10. HDU 4869 Turn the pokers (2014 Multi-University Training Contest 1)

    Turn the pokers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...