HTML5 Canvas

The canvas element is used to draw graphics on web pages.

What is Canvas?

HTML5’s canvas element uses JavaScript to draw images on a web page. (Recommended learning: html tutorial)

The canvas is a rectangular area, and you can control every pixel of it.

canvas has many ways to draw paths, rectangles, circles, characters, and add images.

Create Canvas Element

Add canvas element to HTML5 page.

Specify the id, width and height of the element:

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw through JavaScript

The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

The above is the detailed content of HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!