canvas的使用方法：首先使用文档对象模型（dom）进行目标定位；然后使用id属性识别匹配的目标位置；最后在canvas上绘制图形即可。
本文操作环境：windows7系统、dell g3电脑、html5&&css3版。
canvas是一个html5元素，可以使用javascript编程语言轻松有力地绘制图形，开发人员喜欢使用它来创建丰富的web应用程序。用户可以在不使用adobe的flash播放器等专有浏览器插件的情况下使用这些应用程序。
下面我们就来具体看一下canvas元素怎么使用。
canvas元素只能作为图形的容器; 因此，我们应该使用javascript来渲染图形
我们在canvas上绘制图形，需要首先使用文档对象模型（dom）进行目标定位。并且，使用id属性将帮助你识别匹配的目标位置。
我们来看一个canvas元素的代码
<canvas width="320" height="160" id="canvasexample"></canvas>
canvas元素允许两个特定属性：width和height。
如果不为这两个属性提供值，则canvas将使用宽度为300像素，高度为150像素的默认值。
该id属性被用于识别在javascript代码canvas元素。
最初，<canvas>元素为空。因此，为了展示某些内容，javascript脚本应该在绘制之前获取渲染上下文。
canvas元素有一个内置的dom方法，称为getcontext。它是一个javascript函数，用于访问渲染上下文及其绘图方法。
此函数接受单个参数，通常是2d图形上下文（定义为“2d”）
例如，要在canvas上创建矩形形状，需要以下属性和函数：
fillstyle =“color ” -为矩形添加颜色。
fillrect（x，y，width，height） -绘制一个填充的矩形
strokerect（x，y，width，height） -给矩形提供了轮廓
clearrect（x，y，width，height） -它清除指定的矩形截面并使其完全透明
为了定义坐标，使用canvas网格或坐标系。原始尺寸位于canvas区域的左上角，坐标为（0,0）。
因此，x坐标将向右移动，而y坐标将向下移动。距离以像素为单位
x给出从左上角到右上角的水平位置
y给出从左上角到下边的垂直位置
width给出矩形的宽度
height给出矩形的高度
具体的代码如下
<!doctype html> <html> <head> <title>javascript html5 canvas example</title> </head> <body onload="canvasexample()"> <canvas width="320" height="160" id="canvasexample"></canvas> <script> function canvasexample(){ var canvas = document.getelementbyid("canvasexample"); if(canvas.getcontext){ var context = canvas.getcontext('2d'); context.fillstyle = "blue"; context.fillrect(50,50,150,250); context.clearrect(75,75,100,50); context.strokerect(90,90,75,20); }else{ alert("please a canvas-supporting web browser"); } } </script> </body> </html>
浏览器上显示效果如下
以上代码中javascript中所实现的是：
首先通过dom识别canvas元素
上下文已定义
fillrect（）函数生成一个150 x 250像素的矩形
然后clearrect（）函数从中心删除一个100 x 50像素的矩形
最后，strokerect（）函数在清除区域内构造一个75 x 20像素的矩形
以上就是canvas怎么使用的详细内容。