这里当然也可以像我们之前画三角形一样，自己一步一步地设置路径，设置好之后再画或者进行填充，但这种方法比较麻烦，也容易出错，不建议使用。CanvasRenderingContext2D对象有一个直接用来画矩形的方法，fillRect()和strokeRect()：

var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.strokeStyle = "#fff"; cxt.strokeRect(20,20,50,100); cxt.fillStyle = "#fff"; cxt.fillRect(80,20,50,100);

　　这两个方法都有四个参数(x, y, width, height)，前两个是矩形左上角点的坐标，后两个是矩形的宽和高。

　　④ 画圆

var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.fillStyle = "orange"; //第一个半圆 cxt.beginPath(); cxt.arc(100,100,50,0,Math.PI,true); cxt.closePath(); cxt.fill(); //圆 cxt.beginPath(); cxt.arc(210,100,50,0,2*Math.PI,false); cxt.closePath(); cxt.fill(); //第二个半圆 cxt.strokeStyle = "red"; cxt.beginPath(); cxt.arc(320,100,50,0,Math.PI,false); cxt.closePath(); cxt.stroke();

　　结果如下：

　　arc()方法使用一个中心点和半径，为当前子路径添加一条弧，该方法传六个参数(x, y, radius, startAngle, endAngle, counterclockwise)，分别表示圆心的x坐标，圆心的y坐标，圆的半径，开始的角度，结束的角度，顺时针还是逆时针。其中，两个角度采用弧度来衡量，最后一个参数true表示逆时针，false表示顺时针。

　　这里给大家一个建议，在arc()方法之前加上beginPath(0开始路径，方法之后加上closePath()结束路径，否则可能会出现和其他图形互相影响的情况。画其它图形的时候也是，要注意这一点，只有矩形不用。

　　关于角度的参数有几点说明：默认X轴正半轴的角度为0，沿着逆时针方向角度增加。上面使用到的Math.PI表示的就是数学当中的π，Math对象是ECMAScript为保存数学公式和信息提供的一个对象，该对象还有其它很多属性用起来也非常方便，比如Math.E表示自然对数的底数，也就是常量e的值。

　　⑤ 在画布上写字

var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.fillStyle = "#F21C9D"; cxt.font = "50px simhei"; cxt.fillText("圣诞快乐！",30,100);

　　结果：

　　fillText()方法用来在画布上写字，第一个参数传一个字符串，后两个参数便是左上角点的坐标；

　　cxt.fillStyle用来给字体设置颜色；

　　cxt.font用来设置大小和字体，大小的值和字体的值之间用空格隔开，二者只写一个时无效。

　　⑥ 画图片

var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); var myImg = new Image(); myImg.src = "images/soldier.png"; myImg.onload = function(){ cxt.drawImage(myImg,60,20,680,454); };

　　结果如下：

　　画图片有几个步骤：

　　var myImg = new Image(); 创建image对象；

　　myImg.src = "images/soldier.png"; 指定图片的路径；

　　myImg.onload = function(){

　　　　cxt.drawImage(myImg,60,20,680,454);

　　};

　　加载完图片之后，使用drawImage()方法进行绘制，该方法传四个参数(x, y, width, height)，分别为图片左上角的X坐标，Y坐标，图片的宽，图片的高，宽和高也可以不指定，不指定的话就会显示为图片的原始尺寸。

　　3. 掌握了这些方法之后，我们就可以轻而易举地画出一个简单的坦克了，我们来以湖人队的主色画一个坦克：

var myCanvas = document.getElementById('floor'); var cxt = myCanvas.getContext('2d'); cxt.fillStyle = "#542174"; cxt.fillRect(350,400,20,65); //坦克左边的履带 cxt.fillRect(420,400,20,65); //右边的履带 cxt.fillRect(373,410,44,50); //中间的主体 cxt.fillStyle = "#FCB827"; cxt.beginPath(); cxt.arc(395,435,16,0,2*Math.PI,false); //主体上的圆盖 cxt.closePath(); cxt.fill(); cxt.strokeStyle = "#FCB827"; cxt.lineWidth = "8.0"; cxt.moveTo(395,435); //炮筒起点 cxt.lineTo(395,375); //炮筒终点 cxt.stroke(); //画炮筒

　　结果如下：

　　lineWidth属性用来设置画笔画出的线条宽度，默认值是1.0，设置的值必须大于0，较宽的线条在路径上居中，每边占线条宽度的一半。