Shulou(Shulou.com)06/03 Report--

This article is about how to use canvas in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

As we all know, not all browsers support html5, and even browsers that support html5 may not support all the new features of html5. So you should choose a relatively new browser as your debugging environment, it is recommended that you use firefox (developer's favorite) or chrome browser, all my examples are based on firefox.

The basic knowledge related to html5 will not be introduced here. There are many tutorials about html5 on the Internet. Learn by yourself. Learning html5 requires you to have a good foundation of 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 are quite difficult. You should be regarded as an js expert if you have learned more than 50 articles.

Now let's officially start our canvas course, the first example: "hello canvas".

First, you need to add the canvas tag to the body, as follows:

The code is as follows:

Your browser does not support HTML5 Canvas.

The text section in canvas will be displayed when the browser does not support canvas objects.

The canvas tag is defined, and when we need to operate on it through js, it can be implemented through getElementById.

Var theCanvas = document.getElementById ("canvasOne"); now that we are used to using jquery to develop tasks, how do we get canvas objects using jquery?

Var canvas = $('# canvasOne'). Get (0); or var canvas = $('# canvasOne') [0]; I don't know if you have noticed whether get (0) and [0] are not. If you do not use the get () method or [] subscript, your js code will not operate on canvas properly. Because $('# canvasOne') gets a jquery object, and what we actually want to operate on is a html dom object. There is a problem with the conversion of jquery objects to dom objects, which is done through get () or subscript. If you need to convert a dom object to a jquery object, you can do so using the $() method. Not clear friends only go to Baidu, here do not do in-depth research.

For the robustness of the code, we need to determine whether your browser supports canvas objects, which can be done through the following code.

The code is as follows:

If (! theCanvas | |! theCanvas.getContext) {

Return

}

However, it is recommended that you use the modernizr.js library to do this, which is a very successful html5 js library that provides a lot of useful methods

The code is as follows:

Function canvasSupport () {

Return Modernizr.canvas

}

Canvas supports 2d rendering, which is achieved by the following code:

Var context = theCanvas.getContext ("2d")

Next we can draw the image on the canvas through the context object.

The code is as follows:

/ / set 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 border color

Context.strokeStyle = "# 000000"

/ / draw the border

Context.strokeRect (5,5,490,290)

The drawing of the picture is described below. Because the picture is downloaded asynchronously, in order to ensure that when you draw a picture with canvas, the picture has been downloaded, we use the following way:

The code is as follows:

Var helloWorldImage = new Image ()

HelloWorldImage.src = "helloworld.gif"

HelloWorldImage.onload = function () {

Context.drawImage (helloWorldImage, 160130)

}

When the bottom of the picture is finished, the onload event is triggered, and here the context object is used to draw the picture.

Thank you for reading! This is the end of the article on "how to use canvas in html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.