Html5-描绘各种图形

原文参见：http://www.html5.jp/canvas/how2.html

 

Canvas不仅仅能画线，它还包含画其它各种图形的方法。本文介绍其中几个方法。

 

1. 矩形（长方形）

前一篇文章当中，虽然使用画线的方式描画出了矩形，但是Canvas也包含一个直接就能画出矩形的方法。

ctx.fillRect(x, y, width, height)

画有背景色的矩形，x, y是矩形左上角的坐标位置，width是矩形的宽度，height是矩形的高度。

ctx.strokeRect(x, y, width, height)

画没有背景色的矩形，只有边框。参数和fillRect方法相同。

ctx.clearRect(x, y, width, height)

清除矩形，被清除的部分变为透明。参数和fillRect方法相同。

 

接下来就看看这三个方法的具体使用，Html代码l如下：

<h2>fillRect()</h2>
<canvas id="c1" width="140" height="140"></canvas>
<h2>strokeRect()</h2>
<canvas id="c2" width="140" height="140"></canvas>
<h2>clearRect()</h2>
<canvas id="c3" width="140" height="140"></canvas>

 

分别对这三个Canvas标签，在Javascript代码中使用前面的三种方法。

onload = function() {
  draw1();
  draw2();
  draw3();
};
/* fillRect() 的例子 */
function draw1() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect() 的例子 */
function draw2() {
  var canvas = document.getElementById('c2');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect() 的例子 */
function draw3() {
  var canvas = document.getElementById('c3');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 100, 100);
  ctx.beginPath();
  ctx.clearRect(50, 70, 60, 30);
}

 

结果如下图所示：

  使用fillRect方法，描绘出了背景色为黑色的矩形。

  使用strokeRect方法，描绘出了只有边框的矩形。

 

  为了理解clearRect方法，首先使用fillRect方法画出有背景色的矩形。然后使用clearRect方法，将其中一部分清除掉，途中白色的小矩形就是被清除的部分。使用的ExplorerCanvas 0002使用的话，这个方法的实际行为和期待的行为是不一致的。因此在IE上看到的效果是，canvas标签上的所有图形都被清除掉了。

 

这些方法都是在调用的时候图形就描绘出来了，因此不用特意再去调用fill方法或者stroke方法。

 

2. 圆弧

使用arc方法描绘圆和圆弧。

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

x 圆点横坐标

y 圆点纵坐标

radius 园半径

startAngle 圆弧的开始角度，X轴正半轴开始顺时针旋转，用弧度表示。

endAngle  圆弧的结束角度，X轴正半轴开始顺时针旋转，用弧度表示。

anticlockwise 指定画圆弧的方向。true的话，逆时针旋转，false的话，顺时针旋转画圆弧。

 

startAngle和endAngle指定的角度的单位为弧度，例如360度的话，就是2*Math.PI。 任意的角度转化为弧度的公式为，度数*Math.PI/180。例如，15度的话，就是 15*Math.PI / 180。

onload = function() {
  draw1();
  draw2();
  draw3();
};
/* 画圆 */
function draw1() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 0, Math.PI*2, false);
  ctx.stroke();
}
/* 画圆弧 */
function draw2() {
  var canvas = document.getElementById('c2');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx.stroke();
}
/* 画有背景色的圆弧 */
function draw3() {
  var canvas = document.getElementById('c3');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx.fill();
}

 

结果如下：

  arc(70, 70, 60, 0, Math.PI*2, false)。以坐标(70, 70)为圆心，60像素为半径，从0度开始顺时针旋转360度花圆弧。圆形的话，不论anticlockwise为true或者false，画出的图形都是一样的。

 

  arc(70, 70, 60, 10*Math.PI/180, 80*Math.PI/180, ture)。以坐标(70, 70)为圆心，60像素为半径，从10度开始逆时针旋转到80度的位置画圆弧。10度，80度的度数都是指以X轴正半轴开始顺时针旋转的度数。即使参数anticlockwise指定为true，表示位置的度数也不是逆时针旋转得出的度数，这一点需要注意。

 

  使用fill方法填充前面画出的圆弧的话，圆弧的开口部分就会被直线连接，而得出图形，并不是扇形，这一点需要注意。

 

单只调用arc方法不能描绘出图形，必须再调用stroke方法或者fill方法。

 

截至目前，虽然画了直线和图形，但都是黑白颜色。下一篇文章中将介绍如何给图形填充颜色。>> 填充颜色