跳到主要内容

rect

2023年08月11日
柏拉文
越努力，越幸运

一、认识​

ctx.rect() 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 (x, y)，尺寸为 width 和 height。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。

二、语法​

ctx.rect(x, y, width, height);

  • x: 矩形起点的 x 轴坐标。

  • y: 矩形起点的 y 轴坐标。

  • width: 矩形的宽度

  • height: 矩形的高度

三、场景​

3.1 矩形​

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.rect(0,0,200,100);
ctx.fill();