Canvas API

<canvas> 元素定义 HTML 页面中的位图区域。

Canvas API 允许 JavaScript 在画布上绘制图形。

Canvas API 可以绘制形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作。

将 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 元素本身没有绘图功能。

您必须使用 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);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਇੱਕ ਨਵਾਂ <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);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

clearRect()

ਕੈਨਵਾਸ 'ਤੇ ਚਿੱਤਰਨ ਦੇ ਆਮ ਤਰੀਕੇ ਹਨ:

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();

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ