To draw a graph using HTML5 Canvas, you must first get the 2D context and then call the drawing method. 1. Add canvas elements in HTML and set the width and height; 2. Use JavaScript to get the canvas elements through getElementById, and call getContext('2d') to get the 2D drawing context; 3. Use fillStyle to set the color, call fillRect to draw a rectangle or beginPath combined with arc to draw a circle, and finally realize the graphic drawing. The complete example is shown in the text, and the context must be available before any drawing operation can be performed.
Creating a simple drawing with HTML5 Canvas is straightforward and only requires a few lines of HTML and JavaScript. Here's how you can draw a basic shape — like a rectangle — on a canvas.
1. Set up the Canvas Element
Start by adding a <canvas></canvas> element to your HTML file. This is where your drawing will appear.
<canvas id="myCanvas" width="400" height="300"></canvas>
The width and height attributes define the drawing area. Without them, the canvas defaults to 300×150 pixels.
2. Get the Canvas Context with JavaScript
To draw on the canvas, you need to access its 2D rendering context. Use JavaScript to get the canvas and its context:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
The getContext('2d') method returns an object that provides drawing functions.
3. Draw a Simple Shape
Now use the context to draw something. For example, here's how to draw a filled rectangle:
ctx.fillStyle = 'blue'; // Set fill color
ctx.fillRect(50, 50, 200, 100); // Draw rectangle (x, y, width, height)
This draws a blue rectangle starting at (50, 50) with a width of 200 pixels and height of 100.
Full Example: Drawing a Colored Rectangle
Here's a complete, working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Canvas Drawing</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
// Optional: Add a border
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);
</script>
</body>
</html> This will show a blue rectangle with a black border on a white background.
Bonus: Draw a Circle
You can also draw other shapes. Here's how to draw a red circle:
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2); // (x, y, radius, startAngle, endAngle)
ctx.fill();
Place this after the rectangle code to see both shapes.
That's it! You've created a simple drawing using HTML5 Canvas. From here, you can explore lines, text, images, and animations. The key steps are always:
- Add a
<canvas></canvas> element
- Get the 2D context
- Use drawing methods like
fillRect , arc , beginPath , etc.
Basically just remember: no context, no drawing.
The above is the detailed content of How to create a simple drawing with HTML5 canvas?. For more information, please follow other related articles on the PHP Chinese website!