本文共 2111 字，大约阅读时间需要 7 分钟。

HTML5最伟大之处在于引入了画布Canvas。Canvas元素是为了客户端点阵图形而设计的，它本身没有绘图能力，

但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。

本文将通过示例简单介绍canvas的绘图功能。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们在Canvas区域中绘制图形，并不是拿鼠标在Canvas中画画。事实上Canvas元素只是一块无色透明的区域，就像一个只有宽度高度没有背景的DIV一样，需要使用JavaScript脚本在其中绘画。

示例一：绘制方形

我们在页面上创建一个canvas元素，并且制定id及宽和高。

   
    your browser does not support the canvas tag 
   

Canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用JavaScript来完成：

var c=document.getElementById("square");  var cxt=c.getContext("2d");  cxt.fillStyle="#ff0000";  cxt.fillRect(0,0,150,75); 

通过document.getElementById("square")来获取canvas元素，然后使用c.getContext("2d")来获取2d绘图对象。接着使用fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。上例中绘制了一个红色的方形。

示例二：绘制线条

我们可以通过起始坐标，和结束坐标，来绘制一条直线。

var line=document.getElementById('line');  var c=line.getContext('2d');  c.moveTo(20,20);  c.lineTo(200,100);  c.lineTo(20,100);  c.stroke(); 

moveTo(x，y)：设置绘图起始坐标。

lineTo(x, y)：从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点。

stroke()：描边路径。

示例三：绘制圆形

我们可以通过规定尺寸、颜色和位置，来绘制一个圆。

var c=document.getElementById('circle');  var r=c.getContext('2d');  r.fillStyle='#ff0000';  r.beginPath();  r.arc(70,80,45,0,Math.PI*2,true);  r.closePath();  r.fill(); 

beginPath()：创建路径的第一步是调用beginPath方法，返回一个存储路径的信息。

closePath()：从当前的点到起始点闭合路径。

arc(x, y, radius, startAngle, endAngle, anticlockwise)： (x,y)是圆弧的圆心，radius-半径, startAngle和endAngle是圆弧的开始和结束弧度（radians = (Math.PI/180)*degree)，anticlockwise为true的话是逆时针，否则为顺时针。

fillStyle：设置填充色。

fill()：填充路径。

示例四：制作动画

我们可以通过javascript动态地在画布上绘制图像，并产生动画效果。

var x=0;  var y=0;  var ctx = document.getElementById("animate").getContext("2d");  setInterval(function(){
            ctx.clearRect(0,0,600,600);      ctx.fillStyle="#fc0";      ctx.beginPath();      ctx.arc(x++,y++,15,0,Math.PI*2,true);      ctx.closePath();      ctx.fill();  },10);