HTML5 canvas-1.canvas Introduction

Starting from today, we will begin a series of courses on HTML5 canvas. This series is my summary after reading HTML5 canvas: Native interactivity and animation for the Web. If you are interested, you can download the original English books and read them. This book introduces canvas game development to show us the powerful functions of canvas. I think it is quite good. by reading this book, I learned a lot about canvas. In fact, canvas does not have a lot of APIs. The key is to learn and use it, and learn to make incredible results for the combined use of APIs. This book is the best choice for you to learn canvas. Unfortunately, he has no Chinese version yet, and friends with poor English can only wait.

As we all know, currently not all browsers support HTML5. Even HTML5 browsers do not necessarily support all HTML5 new features. Therefore, you should select a relatively new browser as your debugging environment. We recommend that you use Firefox (developer's favorite) or Chrome browser. All my examples are developed based on Firefox.

I will not introduce the basic HTML5-related knowledge here. I have a lot of tutorials on HTML5 on the Internet. To learn HTML5, you need to have a good JavaScript Foundation. You can go to Uncle Tom's blog to learn: http://www.cnblogs.com/tomxu/archive/2011/12/15/2288411.html. In fact, this series of courses is quite difficult. You should be a JS expert if you learn more than 50 articles.

　　

Now we officially start our canvas course. The first example is "Hello canvas ".

First, add the canvas label to the body, as shown below:

<canvas id="canvasOne" width="500" height="300">Your browser does not support HTML5 Canvas.</canvas>

The text section in the canvas is displayed when the browser does not support the canvas object.

The canvas tag is defined. When we need to operate on it through JS, we can implement it through getelementbyid.

var theCanvas = document.getElementById("canvasOne");

Now we are used to developing tasks using jquery. How can we obtain canvas objects using jquery?

VaR canvas = $ ('# canvasone'). Get (0 );
Or
VaR canvas = $ ('# canvasone') [0];

I don't know if get (0) and [0] do not exist. If the get () method or [] subscript is not used, 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 on is an html dom object. Here there is a problem of converting a jquery object into a DOM object. The conversion is completed through get () or the following method. To convert a DOM object to a jquery object, you can use the $ () method. I don't know if my friends only go to Baidu.

To ensure code robustness, we need to determine whether your browser supports canvas objects. You can use the following code.

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

However, we recommend that you use the modernizr. js library to complete this job. This is a very popular HTML5 JS library and provides many useful methods. site address: http://www.modernizr.com /.

function canvasSupport () {　　return Modernizr.canvas;}

Canvas supports 2D rendering by using the following code:

var context = theCanvas.getContext("2d");

Now we can use the context object to draw images on the canvas.

// Set the region color context. fillstyle = "# ffffaa"; // draw the region context. fillrect (0, 0,500,300 );
// Set the font
Context. font = "20px _ sans ";
// Sets the vertical alignment mode.
Context. textbaseline = "TOP ";
// Draw text
Context. filltext ("Hello world! ", 195, 80 );
// Set the border color
Context. strokestyle = "#000000 ";
// Draw a border
Context. strokerect (5, 5,490,290 );

The following describes how to draw a piece. Because of the asynchronous download of the image, we use the following method to ensure that the image has been downloaded when you draw an image using canvas:

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

When the image below is complete, the onload event will be triggered, and the image will be drawn using the context object here.

Download the demo to see the complete code. Demo: html5canvas.helloworld.zip