Canvas API in HTML5
HTML5 includes a new API for drawing graphics on a web page, called the Canvas API. Here's an example of how to create a simple drawing using the Canvas API:
php
<!DOCTYPE html>
<html>
<head>
<title>My Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var
context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
```
In this example, we use the <canvas> tag to create a canvas element on the web page, with a width and height of 300 and 200 pixels, respectively. We then use JavaScript to get the canvas element and its context, and draw a red rectangle with a width and height of 100 pixels, starting at position (50, 50) on the canvas.
No comments:
Post a Comment