HTML5 canvas元素随其而来的编程接口Canvas API应用前景极为广阔。简单地说，canvas元素能够在网页中创建一块矩形区域，这块矩形区域可以称为画布，这其中可以绘制各种图形。 <canvas></canvas>是HTML5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 。
1、在页面中添加canvas元素
如果要向页面中添加canvas元素，可以使用下面的代码。默认情况下，Canvas所创建的矩形区域大小为宽300px,高150px，也可以使用width和height属性来自定义其宽度和高度。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200"></canvas></body></html> 以上代码只是简单地创建了一个Canvas对象，在浏览器中打开的页面上什么都不会显示。可以通过使用border属性来给canvas设置边框样式。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas></body></html>效果如下：2、Canvas如何绘制图形
在了解Canvas如何绘制图形前，我们先初步了解几个名次概念。
1）context：context是一个封装了很多绘图功能的对象，获取这个对象的方法是
var context =canvas.getContext("2d");//2d表示的是html5目前只能支持2d，而不能提供3d显示
2）canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充
context.stroke()//绘制边框
3）style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
4）颜色的表示方式:
直接用颜色名称:"red" "green" "blue"
十六进制颜色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
canvas本身并不能实现图形绘制功能，绘制图形的工作需要有javaScript完成。使用Javascript可以在canvas元素内部添加线条、图片和文字，也可以在其中绘画，还可以加入高级动画。接下来说一下具体的绘制图形步骤：第一步：在HTML5页面中添加canvas元素，必须定义canvas元素的id属性值以便接下来调用。
<canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas>第二步：使用id寻找canvas元素。在JavaScript中可以通过document.getElementById()方法找到canvas元素。var myCanvas = document.getElementById("myCanvas");第三步：通过canvas元素的getContext()方法来获取上下文（Context），即创建Context对象以获取允许进行绘制的2D环境。var cxt=canvas.getContext("2d");第四步：使用JavaScript绘制图形。例如，使用一下代码可以绘制一个位于画布中央的矩形。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#34b1ff"; cxt.fillRect(50,25,100,50);</script></body></html>效果：
3、检测浏览器是否支持
根据W3c上的定义，可以知道目前canvas的浏览器支持情况如下：
那么我们在不知道浏览器版本的情况下，要如何显示呢？除了可以通过在不支持canvas的浏览器中显示替代文本之外，我们还可以使用JavaScript脚本来 检测浏览器是否支持canvas，方法是判断getContext函数是否存在。JavaScript代码如下：
var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ alert("您的浏览器支持Canvas.") }else{ alert("您的浏览器不支持Canvas.") }4、绘制简单图形我们可以看到很多canvas实现的特效，效果非常好。不过，正所谓“万丈高楼平地起”，所有的事物都要从最简单最基础的部分开始筑建，我们先从最简单的直线、矩形和圆形开始绘制。
1）绘制直线
绘制直线时需要调用3个方法：moveTo()、lineTo()、stroke().
moveTo()方法用于建立新的子路径，并规定其起始点为（x,y）。lineTo()方法用于从moveTo（）方法规定的起始点开始绘制一条道规定坐标的直线，如果前面没有用moveTo（）方法规定子路径的起始点，则lineTo（）方法等同于moveTo（）方法。stroke()方法用于沿该路径绘制一条直线。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #ff54c5"> 您的浏览器不支持.</canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.strokeStyle="#ff54c5"; cxt.moveTo(0,0); cxt.lineTo(200,100); cxt.stroke();</script></body></html>效果：2）绘制矩形 绘制矩形有两种方法，一种是用颜色填充矩形区域，一种是用线条绘制矩形轮廓。其中用到的方法分别是fillRect()和strokeRect()，而且为图形指定颜色提供了两个属性，即fillStyle和strokeStyle，前者用于要填充的颜色，后者是线条颜色。示例1代码如下（填充）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#34b1ff"; cxt.fillRect(0,0,100,50);</script></body></html>效果：
示例2代码如下（线条）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #66d3ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.strokeStyle="#66d3ff"; cxt.strokeRect(0,0,100,50);</script></body></html>效果：
3）绘制圆形
圆形的绘制仍然是采用绘制路径并填充颜色的方法。在绘制圆形的过程中，用到了4个比较关键的方法，beginPath()、arc()、closePath()和fill()。
beginPath()方法用于开始绘制路径，closePath()方法用于结束绘制路径。调用beginPath()方法后，在Canvas中进行一系列圆形的绘制，绘制完成后，应该调用closePath()方法将图形闭合起来。arc()方法本意为绘制弧线，当采用适当的参数后，即可绘制圆形。在这个方法中，具体的方法为：arc(x,y,radius,startAngle,engAngle,anticlockwise)，一共有6个参数，参数中的x,y为起点坐标，radius为圆形的半径，startAngle为开始的角度，endAngle为结束的角度，anticlockwise为是否按照顺时针方向进行绘制。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#66d3ff"; cxt.beginPath(); cxt.arc(100,100,75,0,Math.PI*2,true); cxt.closePath(); cxt.fill();</script></body></html>效果：当然，也可以像画矩形一样，采用线条轮廓的方式，采用stroke()方法，颜色相对应地采用strokeStyle()方法。
新闻热点
疑难解答
