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

HTML5 how to solve the canvas element to lead the next generation of web page problems, I believe that many inexperienced people are helpless, for this reason this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The first canvas element.

HTML5 adds an element canvas, used for drawing, in fact, its performance is closer to div (in fact, it should belong to inline-block), and provides many interfaces, so that it is easy to draw rectangular boxes, circular triangles, etc.

PS: About HTML5 New Elements

After the last two days of learning, and previous knowledge of HTML5, I think HTML5 is actually HTML4, there is not much difference between the two, nothing more than adding something new. I think what HTML5 really means for us is that we can do more with javascript; we can implement better products with javascript. For example, HTML5 solves our headache cross-domain problems, real-time communication API, and now canvas The reason why HTML5 is called HTML5, I think he is epoch-making, for example, he makes it possible for us to develop games with web pages; for example, he makes it impossible for computer desktops to have IE left.

Draw rectangular box

To get straight to the point, let's draw a rectangle and see, here is a color selector for convenient color selection, PS: Now it feels really troublesome to program without jquery.

Question: Defining style versus height versus width

As soon as I came, I encountered a problem. Let me cut a picture here first:

The code is as follows:

function draw() {

//Get canvas object

var canvas = document.getElementById('canvas');

if (canvas == null) {

return false;

}

var context = canvas.getContext('2d');

context.fillStyle = '#99d9ea';

context.fillRect(0, 0, 300, 200); //Fill canvas end

context.strokeStyle = 'red';

context.fillStyle = 'gray';

context.lineWidth = 1;

context.fillRect(10, 10, 100, 100);

context.strokeRect(10, 10, 100, 100);

context.clearRect(20, 20, 20, 20);

}

draw a circle

Let's see how the circle drawing process works everywhere else, but creating a circular path is worth considering:

arc method parameters are many, in order: xy radius start radian (we generally like angles, so we have to convert) end radian clockwise or counterclockwise true for clockwise others are easy to say, mainly this start angle and end angle Let's study, because at first I didn't understand, but later I found that he is actually very simple... That is, the angle at the beginning and the angle at the end, it's the same as what we learned in high school, but the unit conversion Math.PI/180 is one degree... Anyway, I still didn't make it clear. Right, remember when we drew circles in high school except compasses and a semicircular ruler to measure the angle of triangles? The angle I want to say is that... This is too much! It seems that the rightmost is 0 degrees, the vertical is 90 degrees, and the horizontal is 180 degrees. In this case, let's take a look at the above content. Do you know how to solve the problem of how to lead the next generation of web pages in HTML5? If you still want to learn more skills or want to know more related content, welcome to pay attention to the industry information channel, thank you for reading!

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.