阅读 76

说说如何使用 Canvas 绘制基本矩形

HTML5 提供的 canvas 元素,可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这次先说说如何绘制基本矩形。

1 搭建 Canvas 2D 环境

(1)引入 <canvas> 标签

在 HTML 的 <body> 中新增一个 <canvas> 标签。形如:

<canvas id="canvas" width="500" height="500"></canvas>
复制代码

<canvas> 标签有以下3个主要属性。

属性 说明
id 标识该 <canvas> 标签。
width 画布宽度,以像素为单位 。
height 画布高度,以像素为单位 。

(2)获取 Canvas 对象以及 2D 环境

利用下面的代码,就可以获取 Canvas 对象的 2D 环境。

let theCanvas = document.querySelector("#canvas");
let context = theCanvas.getContext("2d");
复制代码

这样, Canvas 2D 环境就搭建好了,我们可以开始绘图啦O(∩_∩)O

2 Canvas 坐标体系

Canvas 中的坐标体系是以左上角( 0 , 0 )为原点的 windows 窗体和 svg 也是如此。这样设计主要是因为过去标准的 CRT 监视器是从上到下、从左到右来显示图像的。

3 绘制基本矩形

绘制基本矩形有 3 种不同方式,它们分别是填充、描边以及清除。

(1)填充

利用 fillRect() 方法,就可以绘制填充矩形。 fillRect() 方法提供以下入参:

参数 描述
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度,以像素计
height 矩形的高度,以像素计
    //绘制填充矩形
    context.fillStyle = '#3498db';
    context.fillRect(20, 20, 145, 85);

    context.fillStyle = '#1bbc9d';
    context.fillRect(200, 20, 145, 85);

    context.fillStyle = '#dd7195';
    context.fillRect(380, 20, 145, 85);
复制代码

运行结果:

fillStyle 属性用于指定填充的颜色,颜色使用 RGB 来指定。

(2)描边

利用 strokeRect() 方法,可以绘制描边矩形。 strokeRect() 方法提供以下入参:

参数 描述
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度,以像素计
height 矩形的高度,以像素计
    context.lineWidth = 1;
    context.strokeStyle = '#3498db';
    context.strokeRect(20, 200, 145, 85);

    context.strokeStyle = '#1bbc9d';
    context.strokeRect(200, 200, 145, 85);

    context.strokeStyle = '#dd7195';
    context.strokeRect(380, 200, 145, 85);
复制代码

运行结果:

strokeStyle 属性用于指定边线的颜色;lineWidth 用于指定边线宽度。

(3)清除

clearRect() 方法用于清除指定矩形区域,让其完全透明,一般用于制作特殊图示。它拥有以下属性:

参数 描述
x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度,以像素计
height 要清除的矩形的高度,以像素计
   context.fillStyle = '#3498db';
    context.fillRect(20, 350, 550, 60);
    //指定区域透明
    for (let i = 1; i < 20; i++) {
        let x = 30 * i;
        console.log('x -> ' + x);
        context.clearRect(x, 350, 10, 10);
    }
复制代码

运行结果:

在实心矩形中,通过清除多个透明矩形区域,就可以制作出这样的城墙图示啦O(∩_∩)O

文章分类
前端
文章标签