Comment: Everyone knows that not all browsers currently support html5. Even browsers that support html5 may not support all new features of html5. It is recommended that you use firefox (developers' favorite) or chrome browser. All my examples are developed based on firefox.
Starting today, we will start a series of courses on html5 canvas. This series is my summary after reading "HTML5 Canvas: Native Interactivity and Animation for the Web". Interested friends can download original English books to read. This book shows us the powerful functions of canvas by introducing the development of canvas. I think it is quite good. I have learned a lot of knowledge about canvas by reading this book. In fact, there are not many APIs in canvas itself. The key is to learn and use them actively and learn to create incredible results for the combination of APIs. And this book is your best choice for learning canvas. It’s a pity that it doesn’t have a Chinese version yet. Friends with poor English can only wait.As we all know, not all browsers currently support html5, and even browsers that support html5 may not necessarily support all new features of html5. So everyone should choose a relatively new browser as their debugging environment. It is recommended that you use firefox (developer’s favorite) or chrome browser. All my examples are developed based on firefox.
I won’t introduce the basic knowledge related to html5 here. There are many tutorials about html5 on the Internet, so I can learn it by myself. To learn html5, you need to have a better foundation in JavaScript. You can go to Uncle Tom's blog to learn:. In fact, this series of courses is quite difficult. If you study more than 50 articles well, 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:
<canvas>
Your browser does not support HTML5 Canvas.
</canvas>
The text part in canvas will be displayed when the browser does not support the canvas object.
The canvas tag is defined. When we need to operate it through js, it can be implemented through getElementById.
var theCanvas = document.getElementById(canvasOne); We are now accustomed to using jquery to develop tasks, so how to get the canvas object using jquery?
var canvas = $('#canvasOne').get(0); or var canvas = $('#canvasOne')[0]; I don't know that get(0) and [0] do not have it. If you do not use the get() method or the [] subscript, your js code will not be able to operate canvas normally. Because $('#canvasOne') gets a jquery object, and what we actually want to operate is an html dom object. There is a problem where jquery object is converted into dom object, and this conversion is completed through get() or subscript. If you need to convert a dom object into a jquery object, you can use the $() method to implement it. My friend who is not clear about it has the only one who goes to Baidu by himself, so I won’t go into it in depth here.
In order to ensure the robustness of the code, we need to determine whether your browser supports canvas objects, which can be implemented through the following code.
if (!theCanvas || !theCanvas.getContext) {
return;
}
However, it is recommended that you use the modernizr.js library to complete this work. This is a very passive html5 js library and provides many useful methods.
function canvasSupport () {
return Modernizr.canvas;
}
Canvas supports 2d rendering, and is implemented through the following code:
var context = theCanvas.getContext(2d);
Next we can draw the image on canvas through the context object.
//Set the area color
context.fillStyle = "#ffffa";
//Draw the 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 border
context.strokeRect(5, 5, 490, 290);
The drawing of the picture is described below. Due to the asynchronous download of the image, in order to ensure that when you draw a picture with canvas, the image has been downloaded, we use the following method:
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
When the image is finished, the onload event will be triggered, and the image will be drawn using the context object.
Everyone download demo to see the complete code. The demo download address: html5canvas.helloworld.zip