Jassif Team Institution

HTML Canvas Reference

<canvas> கூறு HTML பக்கத்தில் ஒரு பிட்மேப் பகுதியை வரையறுக்கிறது.

Canvas API JavaScript க்கு கேன்வாஸில் கிராபிக்ஸ் வரைய அனுமதிக்கிறது.

Canvas API வடிவங்கள், கோடுகள், வளைவுகள், பெட்டிகள், உரை மற்றும் படங்களை, நிறங்கள், சுழற்சிகள், வெளிப்படைத்தன்மை மற்றும் பிற பிக்செல் கையாளுதல்களுடன் வரைய முடியும்.

நீங்கள் <canvas> குறிச்சொல்லுடன் HTML பக்கத்தில் எங்கும் ஒரு கேன்வாஸ் கூறைச் சேர்க்கலாம்:

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

நீங்கள் HTML DOM முறை getElementById() உடன் ஒரு <canvas> கூறை அணுகலாம்.

கேன்வாஸில் வரைய, நீங்கள் ஒரு 2D சூழல் பொருளை உருவாக்க வேண்டும்:

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

Drawing on the Canvas

நீங்கள் ஒரு 2D சூழலை உருவாக்கிய பிறகு, கேன்வாஸில் வரையலாம்.

fillRect() முறை 20,20 நிலையில் மேல்-இடது மூலையுடன் ஒரு கருப்பு செவ்வகத்தை வரைகிறது. செவ்வகம் 150 பிக்சல் அகலமும் 100 பிக்சல் உயரமும் கொண்டது.

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

ctx.fillRect(20, 20, 150, 100);

Using Colors

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

Paths

கேன்வாஸில் வரையும் பொதுவான வழி:

பாதையைத் தொடங்கவும் - beginPath()
ஒரு புள்ளிக்கு நகர்த்தவும் - moveTo()
பாதையில் வரையவும் - lineTo()
பாதையை வரையவும் - 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();

Complete Canvas API Reference

இந்த குறிப்பு கேன்வாஸில் உரை, கோடுகள், பெட்டிகள், வட்டங்கள், படங்கள் மற்றும் பலவற்றை வரையப் பயன்படுத்தப்படும் getContext("2d") பொருளின் அனைத்து பண்புகள் மற்றும் முறைகளையும் உள்ளடக்கியது.

Drawing Methods

கேன்வாஸில் நேரடியாக வரைய மட்டும் 3 முறைகள் உள்ளன:

Path Methods

Circles and Curves

Text

Colors, Styles, and Shadows

Transformations

Image Drawing

The ImageData Object / Pixel Manipulation

Compositing

Other Methods

Standard Properties and Events

கேன்வாஸ் பொருள் நிலையான பண்புகள் மற்றும் நிகழ்வுகளையும் ஆதரிக்கிறது.

Related Pages

Canvas tutorial: Canvas Tutorial

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag

Browser Support

<canvas> கூறு ஒரு HTML5 தரநிலை (2014).

Canvas API அனைத்து நவீன உலாவிகளிலும் ஆதரிக்கப்படுகிறது:

Exercises