html5 canvas-1.canvas introduction (hello canvas)_html5 tutorial skills

Starting today, we will start a series of courses about html5 canvas. This series is my summary after reading "HTML5 Canvas: Native Interactivity and Animation for the Web". Friends who are interested can download the original English book and read it. This book shows us the powerful functions of canvas by introducing the method of canvas game development. I think it is quite good. I learned a lot about canvas by reading this book. In fact, canvas itself does not have many APIs. The key is to learn and use them flexibly, and learn to use the combination of APIs to create incredible effects. This book is your best choice for learning canvas. Unfortunately, it does not have a Chinese version yet. Friends who are not good at English will have to wait.

As we all know, not all browsers currently support html5. Even browsers that support html5 may not support all the new features of html5. Therefore, you should choose a relatively new browser as your debugging environment. It is recommended that you use Firefox (the favorite of developers) or Chrome browser. All my examples are developed based on Firefox.

The basic knowledge related to html5 will not be introduced here. There are many tutorials about html5 on the Internet, so learn it by yourself. Learning HTML5 requires everyone to have a good foundation in JavaScript. You can go to Uncle Tom's blog to learn: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html. In fact, his series of courses is quite difficult. If you learn all 50 or so chapters, you should be considered a js expert.
Now we officially start our canvas course, the first example: "hello canvas".
First you need to add the canvas tag in the body, as follows:

Copy code

Code As follows:

Your browser does not support HTML5 Canvas.

The text part in the canvas will be displayed when the browser does not support the canvas object.
defines the canvas tag. When we need to operate it through js, we can do it through getElementById.
var theCanvas = document.getElementById("canvasOne"); We are now accustomed to using jquery to develop tasks, so how to obtain the canvas object using jquery?
var canvas = $('#canvasOne').get(0); or var canvas = $('#canvasOne')[0]; I don’t know if you have noticed that get(0) and [0] are not there. If If you do not use the get() method or [] subscript, your js code will not be able to operate the canvas normally. Because $('#canvasOne') obtains a jquery object, and what we actually want to operate is an html dom object. There is a problem of converting a jquery object into a dom object. This conversion is completed through get() or subscripting. If you need to convert a dom object into a jquery object, you can use the $() method. Those who don’t know can only go to Baidu on their own, so I won’t go into details here.
For the robustness of the code, we need to determine whether your browser supports the canvas object, which can be achieved through the following code.

Copy code

The code is as follows:

if (!theCanvas || !theCanvas. getContext) {
return;
}

However, it is recommended that you use the modernizr.js library to complete this work. This is a very passed html5 js library that provides many useful methods.

Copy code

The code is as follows:

function canvasSupport () {
return Modernizr.canvas;
}

canvas supports 2d rendering, which is achieved through the following code:
var context = theCanvas.getContext("2d");
Now we can draw images on the canvas through the context object.

Copy code

The code is as follows:

//Set the area color
context .fillStyle = "#ffffaa";
//Draw area
context.fillRect(0, 0, 500, 300);
//Set font
context.font = "20px _sans";
//Set vertical alignment
context.textBaseline = "top";
//Draw text
context.fillText ("Hello World!", 195, 80);
// Set the border color
context.strokeStyle = "#000000";
//Draw the border
context.strokeRect(5, 5, 490, 290);

The following introduces how to draw pictures. Due to the asynchronous downloading of images, in order to ensure that when you use canvas to draw an image, the image has been downloaded, we use the following method:

Copy code

The code is as follows:

var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function ( ) {
context.drawImage(helloWorldImage, 160, 130);
}

When the picture is finished, the onload event will be triggered, and the context object will be used to draw the picture.
Download the demo to see the complete code, demo download address: html5canvas.helloworld.zip