HTML Canvas - Javatpoint

Trang chủ » Html Canvas Graphic » HTML Canvas - Javatpoint

Có thể bạn quan tâm

next → ← prevCanvas Tag in HTML

Introduction

The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw graphics on the web page.

The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.

The <canvas> element is only a container for graphics, you must need a scripting language to draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D shapes and bitmap images.

It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There are several methods in canvas to draw paths, boxes, circles, text and add images.

In HTML, the <canvas> tag is used to dynamically draw shapes, pictures, and other visuals on a web page. It gives you a drawing surface using JavaScript so you can work with and create graphics in real-time. The <canvas> element is a container for visuals that you can create using JavaScript; it doesn't render anything by itself.

An introductory example of using the <canvas> tag is as follows:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Example</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> // JavaScript code to draw on the canvas var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // Draw a red rectangle ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 50); // Draw a blue circle ctx.beginPath(); ctx.arc(300, 100, 30, 0, 2 * Math.PI); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath(); </script> </body> </html>

The <canvas> element in this example has a width and height specified, along with the id property "my Canvas". The JavaScript code contained in the <script> tags retrieves the canvas element using its ID, acquires a 2D rendering context (ctx), and then draws a blue circle and a red rectangle on the canvas using a variety of drawing techniques.

Because of its versatility, the <canvas> tag can be used on a web page for dynamic graphical content such as games, animations, and data visualizations.

Some Points of Canvas Tag in HTML

Here are some additional details and concepts related to the <canvas> tag in HTML:

1. Canvas Coordinates:

The canvas uses a coordinate system where the top-left corner is the origin (0,0). The x-axis increases from left to right, and the y-axis increases from top to bottom.

2. Rendering Context:

The getContext method is used to obtain a rendering context, and in the example above, we used the "2d" context (getContext("2d")). The "2d" context is the most common and is used for 2D graphics.

3. Drawing Methods:

The Canvas API provides various methods for drawing shapes, paths, text, and images. Common drawing methods include fillRect() for rectangles, arc() for arcs/circles, fillText() for text, and more.

4. Styling and Colors:

Styles and colors can be set using properties like fillStyle and strokeStyle. The fillStyle property determines the fill color, and strokeStyle determines the color of the shapes' outlines.

5. Paths:

Paths are used to draw complex shapes. Methods like beginPath(), moveTo(), lineTo(), arc(), and closePath() help define paths. Paths are useful for creating custom shapes and outlines.

6. Animation:

The <canvas> element can be used for simple animations by repeatedly redrawing the canvas at different intervals. The requestAnimationFrame() function is often used for smoother animations.

7. Image Drawing:

Images can be drawn on the canvas using the drawImage () method. This is useful for displaying static images or creating games and interactive applications.

Example:

Here's a brief example demonstrating path drawing and animation:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Path and Animation Example</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // Draw a path (triangle) ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.lineTo(100, 150); ctx.closePath(); ctx.fillStyle = "green"; ctx.fill(); // Animation example (moving a square) var squareX = 0; function drawSquare() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas ctx.fillStyle = "blue"; ctx.fillRect(squareX, 100, 50, 50); squareX += 2; // Move the square to the right requestAnimationFrame(drawSquare); } drawSquare(); // Start the animation </script> </body> </html>

In this example, a blue square is animated to move from left to right on the canvas, along with a green triangle. Each animation frame's canvas is cleared using the clear Rect () method to give the impression of movement.

HTML Canvas Tag with JavaScript

A canvas is a two dimensional grid.

Coordinates (0,0) defines the upper left corner of the canvas. The parameters (0,0,200,100) is used for fillRect() method. This parameter will fill the rectangle start with the upper-left corner (0,0) and draw a 200 * 100 rectangle.

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,200,100); </script>

Output:

Your browser does not support the HTML5 canvas tag.

Drawing Line on Canvas

If you want to draw a straight line on the canvas, you can use the following two methods.

moveTo(x,y): It is used to define the starting point of the line.

lineTo(x,y): It is used to define the ending point of the line.

If you draw a line which starting point is (0,0) and the end point is (200,100), use the stroke method to draw the line.

<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvasLine"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script>

Output:

Your browser does not support the HTML5 canvas tag.

Drawing Circle on Canvas

If you want to draw a circle on the canvas, you can use the arc() method:

arc(x, y, r, start, stop)

To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().

<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvasCircle"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>

Output:

Your browser does not support the HTML5 canvas tag.

Drawing text on canvas

There are property and methods used for drawing text on the canvas.

font property: It is used to define the font property for the text.

fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like bold font.

strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.

Let's see fillText() method example.

<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;"> Sorry! Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvasText1"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello JavaTpoint",10,50); </script>

Output:

Sorry! Your browser does not support the HTML5 canvas tag.

Let's see strokeText() method example.

<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;"> Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvasText2"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello JavaTpoint",10,50); </script>

Output:

Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.

Conclusion

In summary, the HTML <canvas> tag offers a strong and adaptable foundation for dynamic graphics and visualizations on websites. With JavaScript, it enables developers to create and modify a wide range of shapes, routes, text, and images. Getting a rendering context, dealing with coordinates, creating shapes with drawing methods, styling with colors, and employing pathways for more complicated graphics are some of the key ideas related to the <canvas> element.

A variety of applications, including data visualizations, interactive games, animations, and unique graphical user interfaces, frequently use the canvas element. The HTML <canvas> tag's capabilities, when paired with CSS and JavaScript, are still being used to create dynamic and interesting online user experiences as technology advances. For web applications, developers can generate more complex and interactive graphical content by experimenting with extra features and libraries created on top of the Canvas API.

Next TopicHTML Drag & Drop← prev next →

Từ khóa » Html Canvas Graphic