Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形_html/css_WEB-ITnose

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

一、Canvas的基础知识

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

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

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

1、绘制矩形

canvas.html:

   1:      
   2: 
     
   3: 
     
   4: 
     
   5: 
     
   6: 
     
   7: 
     
   8: 
     
   9: 
     
  10:     
canvas元素学习
     
  11:     
     
  12: 
     
  13: 
          
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     
  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      
  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      
  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）:图形渐变和图像形变换