HTML Canvas రెండియమ్

మరియు చూడండి: CodeW3C.com పూర్తి Canvas పరిచయపు పాఠ్యపుస్తకం
పూర్వ పేజీ తదుపరి పేజీ

实例

绒制一个 150*100 布缩的知方形：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();

亲自试一试

rect() 方法

rect() 方法向路径添加一个知方形。

语法：

context.rect(x, y, width, height)

参数	描述
x	知方左上角的 x 坐标。
y	知方左上角的 y 坐标。
width	知方的宽度，以压缩为单位。
height	知方的高度，以压缩为单位。

更多实例

实例

使用 rect() 方法创建三个知方形:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 红色知方形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// 绿色知方形
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// 般色知方形
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();

亲自试一试