Let's formally learn some basic concepts and knowledge in WebGL development.
1. HTML canvas
For creating graphical applications on the Web, HTML5 provides a rich set of features such as 2D Canvas, WebGL, SVG, 3D CSS transformations, and SMIL. To write a WebGL application, you need to use the HTML5 canvas element.
1.1 HTML5 Canvas
HTML5 tags provide a simple and powerful option to implement JavaScript graphics drawing, which can not only be used to draw graphics, make photo composition, but also use it to develop cool animations. For the simplest element, you only need to specify attributes such as id, width, and height, as shown below.
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
The canvas tag has three attributes, id, width, and height, which determine the size of the canvas. Browsers like Firefox, Chrome, and Web Kit provide canvas elements with a size of 300 × 150 by default if the programmer does not specify them under the canvas tag.
Below is an example of an HTML canvas.
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"