About developing html5 2d animations and games and packaging and publishing as mobile APPs (simple entry)

Write an article about html5 2d and publishing mobile APP

First imagine what we want to do with html5:

1. Create a canvas for painting with html5 code

2. Write a sentence in canvas such as: Hello, this is the first html5 2d page in this series

3. Draw a solid circle in the canvas, and let the solid circle automatically move 300 pixels to the right

The effect is as follows:

(Picture 1)

(Figure II)

Code 1:

<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Circle animation</title>
		<script type="text/javascript">
			var x = 100;
			var y = 100;
			var ctx;
			var canvas1;
			
			function init() {
				ctx = document.getElementById('canvas').getContext('2d');
				canvas1 = document.getElementById('canvas');
				ctx.font = "bold 10pt sans-serif";
		
				setInterval(function(e) {
					animate();
				}, 100);
			}

			function animate() {

		
					ctx.clearRect(0, 0, canvas1.width, canvas1.height);
                                ctx.fillStyle="black";
				ctx.fillText("Hello, this is the first html5 2d page in this series.", 10, 20);
				ctx.beginPath();
				ctx.arc(x, y, 50, 0, 2 * Math.PI);
				ctx.fill();
				if (x < 300) {
					x++;
				}
			}
		</script>
	</head>

	<body onLoad="init();">
		<canvas id="canvas">
			
		</canvas>
	</body>

</html>

Friends who are familiar with html will definitely find that the code of html5 2d is also inseparable from the following form

<html>
  <head>
  </head>
  <body>
 </body>
</html>

In fact, it is to add <canvas id="canvasid"></canvas> to the code <body></body> of ordinary html, then add the onLoad attribute to the body and set the JS code init() method to enter the drawing, which means When the <body> tag of the entire page is opened, the init() function in the JS code is used to handle the following things. Our init() here is used to control what the canvas does to draw pictures. (canvasid is the id of the canvas canvas, you can set it yourself)

<body onLoad="init();">
		<canvas id="canvas">			
		</canvas>
</body>

So how to draw what, the focus is in the javascript code (nagging about the entry, huh, huh)

<script type="text/javascript">
      function init() {
                   
                      //.......................................              
 
                      }
</script>

Only 4 variables are defined in code 1. The variable x is the abscissa of the circle we want to make, and the variable y is the ordinate of the circle we want to make (that is, the position to draw, from the upper left corner of the canvas)

var x = 100;
var y = 100;

The variable ctx is used to hold the environment used for drawing on the canvas

var ctx;

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

The variable canvas1 is used to save the canvas canvas label, and its main function is to obtain the width and height of the canvas canvas on the web page;

var canvas1;

canvas1 = document.getElementById('canvas');

Set the font of the canvas environment

ctx.font = "bold 10pt sans-serif";

bold is bold

10pt is the pixel size of the font

sans-serif represents the sans-serif font used

If you want to set it to bold, 20 pixels, not bold, the code is

ctx.font = "10pt bold";

The animation function is to set a timer and use the timer to continuously execute the code in the animate() method, once every 100 milliseconds

setInterval(function(e) {
				animate();
				}, 100);

Finally, in the animate method, do our drawing 1. Refresh the canvas to be blank

ctx.clearRect(0, 0, canvas1.width, canvas1.height);

Some people may ask why you want to refresh the canvas to be blank, doesn't it refresh the canvas to be blank every 100 milliseconds? Answer: Yes, if you don't refresh the canvas to be blank every time, you will get the following effect:

Why do you get the above effect? Because the canvas is constantly drawing circles, the previous ones are not emptied. In fact, we see many circles overlapping each other. Draw the words we want to write at the position of the horizontal coordinate 10 and the vertical coordinate 20 of the canvas:

ctx.fillStyle="black"; //Set the drawing color to black
ctx.fillText("Hello, this is the first html5 2d page in this series.", 10, 20);

Draw a solid circle:

ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath(); This sentence is very important, it is to open a path, if not reopen a path, the program will draw ctx.arc(x, y, 50, 0, 2 * Math.PI); draw our circle, x is the horizontal coordinate, y is the vertical coordinate, 50 is the radius of the circle, 2 * Math.PI is the full circle you want to draw, and if you draw a semicircle, it is 1 * Math. PI ctx.fill(); Fill the center of the circle and finally the secret why the circle moves, add:

if (x < 300) {           
				x++; //equivalent to x=x+1
	      }

如果x小于300,那x就自动加1，此代码由于在计时器自动执行的animate()方法里面，所以每100毫秒执行animate()方法的时候都会执行到如果x小于300，x就自动加1并赋值，咱们的圆就动了

if (x < 300) {           
				x++;           //等同于x=x+1
	      }

If x is less than 300, then x is automatically incremented by 1. Since this code is in the animate() method that is automatically executed by the timer, every 100 milliseconds when the animate() method is executed, it will be executed until x is less than 300, and x is automatically incremented. 1 and assign a value, our circle will move. About how to package and publish, here is a completely free editing and publishing software HBuilder - a code editing software that is often used when small bloggers are working. The reason is that Because it is fast enough, after the download is complete, you can double-click the desktop shortcut to open HBuilder

to open the software and select New ---> Mobile APP in the upper left corner (if you want to develop a mobile APP, choose this, if you are developing an ordinary html web page, choose this web project)

will pop up a Create Mobile APP dialog box, enter the project name (here is test1)

to see the project editor, double-click index.html, the code editor will open, and the instant web browser will also open; Change the code in the code editor to " Code 1 ", when the web browser on the right automatically displays the animation of the black ball movement, it is OK. Finally, we want to package and publish the APP, please ensure that the network connection is normal (because it is a remote package, If you want to package locally, you need to install the Android or IOS SDK on the machine), just click Release -> Release as a native installation package in the above menu, select Android, use the DCloud public certificate, and then click the package in the lower right corner

if It prompts that there may be a lack of permissions. Actually, the permissions such as camera and positioning have not been added to the program. Since we do not use these functions, we can directly select to confirm that there is no lack of permissions. Continue to package and

submit to the cloud. After successful, click OK

to display The status of making the installation package

When it shows that the package is successful and the download is complete, click to open the download directory, and you can see the packaged APP installation package,

so that you can put the APK on the simulator or Android phone to test it, huh, huh

About developing html5 2d animations and games and packaging and publishing as mobile APPs (simple entry)

Guess you like