Canvas game development learning part one: First introduction to the tag

Let’s start with the definition of the element.

<canvas id="myCanvas" width="150" height="150"></canvas>

looks very similar to , the only difference is that it does not contain the src
and alt
attributes. It has only two properties, width and height, both of which are optional and can be set using DOM or CSS. If width and height are not specified, the default is 300 pixels wide and 150 pixels high. Although the canvas can be resized through CSS, the rendered image will scale to fit the layout (if you find that the rendering results look distorted, instead of relying solely on CSS, try explicitly specifying the width and height properties of the canvas). The closing tag is required. The

element can be styled (margins, borders, background, etc.) just like a normal image. However, these styles will not have any impact on the actual image generated by canvas. Next we'll see how to apply styles. If no style is specified, the canvas is fully transparent by default.

Because
is relatively new and some browsers have not implemented it, such as Firefox 1.0 and Internet Explorer, so we need to provide alternative display content for browsers that do not support canvas. We just need to insert the replacement content directly into the canvas element. Browsers that do not support canvas will ignore the canvas element and render the alternative content directly, while browsers that support it will render the canvas normally. For example, we can fill some text or pictures into canvas as alternative content:

<canvas id="game" width="150"    style="max-width:90%">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <img  src="/static/imghwm/default1.png"  data-src="images/clock.png"  class="lazy"    style="max-width:90%"  style="max-width:90%"/ alt="Canvas game development learning part one: First introduction to the <canvas> tag" >
</canvas>

The fixed-size drawing screen created opens one or more rendering contexts (rendering context), through which we can control the content to be displayed. We focus on 2D rendering, which is currently the only option, and may add an OpenGL ES-based 3D context in the future.

The initialization is blank. To draw with a script on it, you first need its rendering context. It can be obtained through the getContext
method of the canvas element object. At the same time, the obtained There are some functions for drawing. getContext()
Accepts a value describing its type as a parameter. getContext() returns a CanvasRenderingContext2D object.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

The first line above obtains the DOM node of the canvas object through the getElementById method. Then obtain its drawing operation context through its getContext
method.

In addition to displaying alternative content on browsers that do not support canvas, you can also use scripts to check whether the browser supports canvas. The method is very simple, just determine whether getContext
exists.

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

We will start with the following simplest code template (which will be used in subsequent examples).

  
    
    
    
  
  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

If you are careful, you will find that I have prepared a function named draw
, which will be executed once after the page is loaded (by setting the onload attribute of the body tag). Of course, it can also be used in other is called in the event handler function.

The above is one of canvas game development learning: first introduction to the content of the tag. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!