Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状.

与矩形有关的方法包括:

• fillRect()
• strokeRect()
• clearRect()

 

上述方法都接收四个参数:

1. 绘制矩形的 X 坐标
2. 绘制矩形的 Y 坐标
3. 矩形的宽度
4. 矩形的高度

这些参数的单位都是像素

 

首先,fillRect() 方法在 canvas 中绘制的矩形会填充指定颜色

填充的颜色通过上一篇文章介绍的 fillStyle 指定,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
    var context = drawing.getContext('2d');

    // 绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);

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

 

strokeRect() 方法在画布上绘制矩形会使用指定的颜色描边

描边的颜色由 strokeStyle 指定,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
    var context = drawing.getContext('2d');

    // 绘制红色描边矩形
    context.strokeStyle = "#ff0000";
    context.strokeRect(10,10,50,50);

    // 绘制半透明蓝色描边矩形
    context.strokeStyle = 'rgba(0,0,255,0.5)';
    context.strokeRect (30,30,50,50);
}

 

描边线条的宽度由 lineWidth 属性指定,该属性的值为任意整数

而描边线条末端的形状则可以通过 lineCap 属性控制,支持的值有 "butt"(平头) "round"(圆头) "square"(方头)

此外,线条相交的方式可以通过 lineJoin 属性控制,支持的值有: "round"(圆交) "bevel"(斜交) "miter"(斜接)

 

 

最后是 clearRect() 方法,用于清除画布指定矩形区域内的图形,如:

var drawing = document.getElementById('drawing');

if(drawing.getContext){
    var context = drawing.getContext('2d');

    // 绘制红色矩形
    context.fillStyle = "#ff0000";
    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);
}