HTML DOM Canvas 对象

Ang elemento <canvas> ay nagtatalaga ng larawang bilang na rehiyon sa pahina ng HTML.

Ang Canvas API ay nagbibigay ng kapangyarihan sa JavaScript na magpahayag ng mga grapik sa kanvas.

Ang Canvas API ay nagbibigay ng kakayahan sa JavaScript na magpahayag ng mga grapik sa kanvas.

Idagdag ang Canvas sa HTML

Maaari mong magdagdag ng elemento canvas sa anumang lugar ng pahina sa HTML gamit ang tag <canvas>:

Example

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

Try it yourself

Paano abutin ang elemento Canvas

Maaari mong gamit ang HTML DOM method na getElementById() upang abutin ang elemento <canvas>:

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

To draw on the canvas, you need to create a 2D context object:

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

Note

The HTML <canvas> element itself does not have drawing capabilities.

You must use JavaScript to draw any graphics.

The getContextMenu() method returns an object with drawing tools (methods).

Drawing on the canvas

After creating the 2D context object, you can draw on the canvas.

The following fillRect() method draws a black rectangle at position 20,20. The rectangle is 150 pixels wide and 100 pixels high:

Example

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

Try it yourself

Using color

The fillStyle property sets the fill color of the drawing object:

Example

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

Try it yourself

You can also use the document.createElement() method to create a new <canvas> element and add it to an existing HTML page:

Example

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

Try it yourself

Path

Common methods for drawing on the canvas are:

1. Start a path - beginPath()
2. Move to a point - moveTo()
3. Draw in the path - lineTo()
4. Draw a path - stroke()

Example

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

Try it yourself