绘制形状

 

概述

Canvas API中提供处理形状的简单方法有：

  • fillRect：它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高，在绘制矩形前可以使用fillStyle属性设置矩形的填充色
CanvasRenderingContext2D.fillRect(x, y, w, h);
  • strokeRect：以fillRect类似，绘制空心矩形
CanvasRenderingContext2D.strokeRect(x, y, w, h);
  • clearRect：清除给定坐标的矩形区域
CanvasRenderingContext2D.clearRect (x, y, w, h);

上面的方法只能处理简单的矩形，当需要处理其他复杂形状时可以使用paths，处理流程：

1. 使用beginPath方法开始一个新的路径绘制

2. 使用下面的方法绘制图形：

  • moveTo：设置线段的起点(x, y)
CanvasRenderingContext2D.moveTo(x, y);
  • lineTo：设置线段的终点(x, y)
CanvasRenderingContext2D.lineTo(x, y);
  • rect：绘制矩形，与fillRect和strokeRect方法不同的是，使用rect方法必须配合使用stroke或者fill方法着色
CanvasRenderingContext2D.rect(x, y, w, h);
  • quadraticCurveTo：绘制二次贝塞尔曲线
CanvasRenderingContext2D.quadraticCurveTo(cpx, cpy, x, y);
  • bezierCurveTo：绘制三次方贝塞尔曲线
CanvasRenderingContext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  • arc：绘制弧或者曲线
CanvasRenderingContext2D.arc(x, y, r, start, end, anticlockwise);
  • arcTo：绘制两切线之间的弧或曲线
CanvasRenderingContext2D.arcTo(x1, y1, x2, y2, radius);

3. 使用closePath结束路径绘制 4. 使用stroke或者fill方法给绘制好的路径着色，在这之前使用strokeStyle属性设置填充色，还可以赋值lineWidth设置线条的大小

代码示例

在abstract一节中，我们绘制了一个9*9的空表格，现在我们来为每个表格填充数字以及x与y轴坐标的乘积： 

// GridFunny定义与[[36:26:canvas:abstract]]一节中一致
// 添加一个获取随机颜色的方法
GridFunny.prototype._randColor = function() {
    var colors = [
        "#cfd9df", "#a1c4fd", "#8fd3f4", "#e6dee9", "#c3cfe2",
        "#a8edea", "#e0c3fc", "#ebbba7", "#fff1eb", "#accbee",
        "#c1dfc4", "#deecdd", "#fbfcdb", "#6a85b6", "#9face6"
    ];
    return colors[Math.floor(Math.random() * colors.length)];
}

var grid = new GridFunny({
    gridColor: "green",
    fillGrid: function(keyX, keyY, pixelX, pixelY) {
        this.context.fillStyle = this._randColor();
        this.context.fillRect(this.gridOfX[keyX], this.gridOfY[keyY], pixelX, pixelY);
    }
});
grid.start();

在abstract一节中，我们其实使用了path的相关方法绘制了一个基本的9*9表格，处理流程是： 

1. 使用clearRect(0, 0, width, height)方法清空矩形区域
2. 调用beginPath，开始路径绘制
3. 按照单元表格的大小分别在x轴与y轴绘制实线，步骤是首先使用moveTo设置线段起点坐标，然后调用lineT设置线段的终点坐标
4. 使用closePath方法结束路径的绘制，赋值strokeStyle设置填充色，最后调用stroke方法着色。

本节示例代码中，在基础表格之上，通过调用fillRect以及赋值fillStyle属性为单元表格填充随机的颜色。

代码的执行效果如下：


跳至内容顶部