绘制一个矩形：

  1. //绘制 150*100 像素的矩形
  2. var c=document.getElementById("myCanvas");
  3. var ctx=c.getContext("2d");
  4. ctx.rect(20,20,150,100);
  5. ctx.stroke();

4.png

用法：

  1. context.rect(x,y,width,height);
参数 描述
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计

举例：

  1. ///通过 rect() 方法来创建三个矩形：
  3. var c=document.getElementById("myCanvas");
  4. var ctx=c.getContext("2d");
  6. // 红色矩形
  7. ctx.beginPath();
  8. ctx.lineWidth="6";
  9. ctx.strokeStyle="red";
  10. ctx.rect(5,5,290,140);
  11. ctx.stroke();
  13. // 绿色矩形
  14. ctx.beginPath();
  15. ctx.lineWidth="4";
  16. ctx.strokeStyle="green";
  17. ctx.rect(30,30,50,50);
  18. ctx.stroke();
  20. // 蓝色矩形
  21. ctx.beginPath();
  22. ctx.lineWidth="10";
  23. ctx.strokeStyle="blue";
  24. ctx.rect(50,50,150,80);
  25. ctx.stroke();

5.png