HTML5 Canvas：绘制矩形

不论你在 上绘制什么图形，有两个属性是你必须设置的：

描边属性-stroke 填充属性-fill

填充属性和描边属性决定如何来绘制图形。stroke是图形的外轮廓边框。fill则是图形的填充颜色。

下面是一个简单的例子，在Canvas中绘制了一个蓝色边框和绿色填充的矩形（实际上这是两个矩形）：

你的浏览器不支持HTML5 Canvas！

上面例子的实现代码如下：

// 1. 等待页面DOM元素加载完毕
window.onload = function() {
    drawExamples();
}
function drawExamples(){
    // 2. 获取canvas元素的引用
    var canvas  = document.getElementById("ex1");

    // 3. 从canvas元素中获取一个2D context
    var context = canvas.getContext("2d");

    // 4. 绘制图形
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);

    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}                                
                            

注意上面的填充样式和描边样式是分别设置的。分别是使用2D上下文的 strokeStyle 和 fillStyle 属性。

描边的宽度使用的是 lineWidth 属性， lineWidth 设置为5表示矩形的外边框的线条宽度为5个单位。

在HTML5 canvas中，可以绘制的最简单的图形莫过于绘制一个矩形。在上面的例子中我们就绘制了两个矩形。它们分别是通过2D上下文的 fillRect() 方法和 strokeRect() 方法来实现的。

绘制矩形的代码如下：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);                                
                            

你的浏览器不支持HTML5 Canvas！

fillRect() 方法用于绘制一个填充颜色的矩形。它由 x 和 y 属性决定矩形的左上角位置， width 和 height 实现决定矩形的宽度和高度。

请记住， canvas的坐标系统由canvas的左上角(0,0)坐标开始 ，然后X轴向右为正值方向，Y轴向下为正值方向。它的Y轴和正常的几何坐标系统是相反的。

x 、 y 、 width 和 height 4个变量作为参数传入 fillRect() 中，用以确定如何绘制这个矩形。下面是一个例子：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.fillRect(x, y, width, height);                                
                            

下面是上面的代码所绘制的矩形：

你的浏览器不支持HTML5 Canvas！

上面的矩形是黑色的，是因为我们没有设置2D上下文的 fillStyle 属性，它默认的颜色就是黑色的。

strokeRect() 方法用于绘制一个描边矩形，没有填充色。同样，它由 x 和 y 属性决定矩形的左上角位置， width 和 height 实现决定矩形的宽度和高度。熄灭是一个例子：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.strokeRect(x, y, width,height);                                
                            

上面代码的返回结果如下：

你的浏览器不支持HTML5 Canvas！

同样，在我们没有设置2D上下文的 strokeStyle 属性的情况下，描边色是黑色的。

你可以使用2D上下文的 lineWidth 属性来设置描边的宽度。例如下面的例子：

var x = 10;
var y = 10;
var width  = 100;
var height = 100;

context.lineWidth = 4;
context.strokeRect(x, y, width, height);                                
                            

上面的代码的返回结果如下：

你的浏览器不支持HTML5 Canvas！

你可以使用2D上下文的 fillStyle 和 strokeStyle 来设置绘制矩形的颜色。例如下面的例子：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#f2784b";
context.fillRect(10,10, 100,100);

context.lineWidth   = 4;
context.strokeStyle = "#049372";
context.strokeRect(30,20, 120,110);                                
                            

上面的代码的返回结果如下：

你的浏览器不支持HTML5 Canvas！

2D上下文的 clearRect() 函数用于在Canvas中清除一个矩形区域。被清除的矩形区域变为透明。下面是一个例子：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);

context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120, 110);

context.clearRect(50, 30, 110, 35);    

上面代码的而返回结果如下：

你的浏览器不支持HTML5 Canvas！

注意观察上面的图形，红色和蓝色矩形分别被清除掉一部分。因为 clearRect() 会使矩形区域变得透明，而canvas元素位于其它元素的上面，所以透过透明区域可以看到这些canvas元素。

clearRect() 和矩形一样也可以传入4个参数： clearRect(x, y, width, height) 。这4个参数的意义和矩形的描述是相同的。

查看更多关于HTML5 Canvas：绘制矩形的详细内容...