عنصر Canvas DOM HTML

عنصر <canvas> منطقه‌ای ریسه‌ای در صفحه HTML را تعریف می‌کند.

API Canvas اجازه می‌دهد تا JavaScript در صفحه نقاشی بکشید.

API Canvas می‌تواند شکل‌ها، خطوط، منحنی‌ها، مربع‌ها، متن و تصاویر را ترسیم کند، همچنین رنگ‌ها، چرخش، شفافیت و سایر عملیات پیکسلی.

افزودن Canvas به HTML

شما می‌توانید از تگ <canvas> در هر مکان از صفحه HTML برای افزودن عنصر canvas استفاده کنید:

实例

<canvas id="myCanvas" width="300" height="150"></canvas>

亲自试一试

چگونه به عنصر Canvas دسترسی پیدا کنیم

شما می‌توانید از روش HTML DOM به نام getElementById() برای دسترسی به عنصر <canvas> استفاده کنید:

const myCanvas = document.getElementById("myCanvas");

如需在画布上绘图，您需要创建 2D 上下文对象：

const ctx = myCanvas.getContext("2d");

笔记

HTML <canvas> 元素本身没有绘图功能。

您必须使用 JavaScript 来绘制任何图形。

getContext() 方法返回一个带有绘图工具（方法）的对象。

在画布上绘图

创建 2D 上下文对象之后，您就可以在画布上绘图了。

下面的 fillRect() 方法绘制了黑色矩形，其左上角位于位置 20,20。该矩形宽 150 像素，高 100 像素：

实例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

亲自试一试

使用颜色

fillStyle 属性设置绘图对象的填充颜色：

实例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

亲自试一试

您还可以使用 document.createElement() 方法创建一个新的 <canvas> 元素，并将该元素添加到现有 HTML 页面：

实例

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

亲自试一试

مسیر

在画布上绘图的常见方法是：

1. 开始路径 - beginPath()
2. 移动到一个点 - moveTo()
3. 在路径中绘制 - lineTo()
4. 绘制路径 - stroke()

实例

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

亲自试一试