使用Canvas绘制矩形

其中的html中的代码为：

<canvas id="drawing" width="200" height="200"><!--定义画布-->

方法1：fillRect（）方法在画布上绘制矩形

/!*使用fillRect（）方法在画布上绘制矩形*!/
   var drawing=document.getElementById("drawing");
   // /!*确定浏览器是否支持<canvas元素>*!/
    if (drawing.getContext)
    {
      var context=drawing.getContext("2d");

      // /!*绘制红色矩形*!/
      context.fillStyle="red";
      context.fillRect(10,10,50,50);/*参数的意思分别为：开始的横纵坐标、矩形的长和宽*/

      // /!*绘制半透明色的蓝色矩形*!/
      context.fillStyle="rgba(0,0,255,0.5)";
      context.fillRect(30,30,50,50);

      /*在两个矩形重叠的地方清除一个小矩形*/
      context.clearRect(40,40,10,10);
    }
 /*  使用fillRect（）方法在画布上绘制矩形*/

方法2：

使用strokeRect方法（）绘制矩形

var drawing=document.getElementById(“drawing”);
if (drawing.getContext)
{
var context=drawing.getContext(“2d”);

      /!*绘制红色描边矩形*!/
      context.strokeStyle="ff00000";
      context.strokeRect(100,100,80,80);

      /!*绘制半透明的蓝色描边矩形*!/
      context.strokeStyle="rgba(0,0,255,0.5)";
      context.strokeRect(120,120,80,80);