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

This article mainly shows you "how to use HTML5 Canvas API to draw a rectangle", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn how to use HTML5 Canvas API to draw a rectangle "this article.

Use closePath () to close the shape

First of all, we draw a rectangle in the most common way.

Draw rectangles your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (150 and 50); context.lineTo (650); context.lineTo (650550); context.lineTo (150550) Context.lineTo (15015050); / / draw the last stroke to close the image context.lineWidth = 5; context.strokeStyle = "black"; context.stroke ();}

Running result:

At first glance, there is no problem, but the children's shoes with good eyesight have been found, and there is a problem when the last stroke is closed, resulting in a gap in the upper left corner. This situation is caused by setting lineWidth. If you default to 1 stroke, there is no problem. But the larger the strokes and the wider the lines, the more obvious the gap. So how can this be avoided?

The title is spoiled. Use clothPath () to close the graph.

Draw rectangles your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (150 and 50); context.lineTo (650); context.lineTo (650550); context.lineTo (150550) Context.lineTo (15015015050); / / the last stroke can be done without drawing context.closePath (); / / use closePath () to close the figure context.lineWidth = 5; context.strokeStyle = "black"; context.stroke ();}

Running result:

In this example, combined with the previous lesson, we learned that when drawing a path, you need to wrap the planned path with beginPath () and closePath (). Of course, the last stroke can not be drawn, just use closePath (), it will automatically close for you. (so you can't use closePath () if you don't want to draw a closed shape.)

Color a rectangle

Here we introduce a method fill () that is as important as stroke (). Just like the original stroke, we have to use the fillStyle attribute to select the color to fill before filling.

For example, if we want to paint the upper rectangle yellow, we can write like this.

Draw rectangles your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (150 and 50); context.lineTo (650); context.lineTo (650550); context.lineTo (150550) Context.lineTo (150150 50); / / the last stroke can not be painted with context.closePath (); / / use closePath () to close the figure context.fillStyle = "yellow"; / / Select the color of the paint bucket context.lineWidth = 5; context.strokeStyle = "black"; context.fill () / / confirm to fill context.stroke ();}

Running result:

What needs to be noted here is a good coding specification. Because I said earlier that Canvas is state-based rendering, only stroke () and fill () are called to determine the drawing. So we need to put these two lines of code at the end, and the rest of the code for the state settings before them, separating the state settings from the code that determines the drawing. Enhance the readability of the code.

Encapsulation rendering method

You must have noticed that there are actually four strokes in drawing a rectangle. how troublesome is it that we have to draw these four strokes every time we draw a rectangle in this stupid way? if we have to spend 10 rectangles? 100? 1000? If it is written in this way, the code will be bloated and the reusability will be very low. Here, we can encapsulate these methods using JavaScript. We know that a rectangle can be uniquely determined by its upper-left coordinates and its length and width.

JavaScript function

Here we introduce the JavaScript function. If you have a foundation, you can skip this long section and look directly at the back.

Like the function declaration calls of the ActionScript language, JavaScript is the simplest of the programming languages.

The function of function

Function, you can write the code once, and then reuse the code repeatedly. For example, we need to complete the function of multiple sets of numbers and sums.

Var sum; sum= 3: 2; alert (sum); sum=7+8; alert (sum);.... / / keep repeating two lines of code

If you want to achieve the sum of eight sets of numbers, you need 16 lines of code, and the more you implement, the more lines of code you have. So we can put a block of code that completes a specific function into a function and call this function directly, saving the trouble of repeatedly entering a lot of code.

Use the function to complete:

Function add2 (sum b) {sum = a + b; alert (sum);} / / you only need to write once to add2 (3Jing 2); add2 (7Jing 8); / / you just need to call the function

Define function

How do you define a function? Look at the following format:

Function function name () {function body;}

Function defines the keyword of the function, "function name" the name you give the function, and "function body" replaced by code that performs a specific function.

Function call

After the function is defined, it cannot be executed automatically, so you need to call it and write the function name directly in the desired location. There are generally two ways:

The first case is called within the tag.

Function tcon () {alert ("Congratulations on how to call the function!");} tcon (); / / call the function and write the function name directly.

The second case: call in the HTML file, such as by clicking the button and calling the defined function.

This situation will be used later.

Function with parameters

The format is as follows:

Function function name (parameter 1, parameter 2) {function code}

Note: there can be multiple parameters, increase or decrease the number of parameters as needed. Parameters are separated by (comma,).

According to this format, the sum of any two numbers implemented by the function should be written as:

Function add2 (xpene y) {sum = x + y; [xss_clean] (sum);}

X and y are the two parameters of the function, through which we can pass the two actual additions to the function when we call the function.

For example, add2 (3pr 4) will find the sum of 3x 4, and add2 (60pr 20) will find the sum of 60 and 20.

Return value function

Function add2 (x y; return sum; y) {sum = x + function / / returns the value of the function, and the value after return is called the return value. }

The return here is the same as in other languages, but in weakly typed languages such as JS or AS, the return value type does not need to be written into the function declaration.

So far, we have systematically talked about the JavaScript function by the way. Let's get back to the point.

We can also encapsulate our rectangle, the code is as follows:

Encapsulating the method of drawing rectangles your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); drawRect (context, 150,50,50,50, "red", 5, "blue"); drawRect (context, 250,50,50,50, "green", 5, "red") DrawRect (context, 350,50,50,50, "yellow", 5, "black");} function drawRect (cxt, x, y, width, height, fillColor, borderWidth, borderColor) {cxt.beginPath (); cxt.moveTo (x, y); cxt.lineTo (x + width, y); cxt.lineTo (x + width, y + height) Cxt.lineTo (x, y + height); cxt.lineTo (x, y); cxt.closePath (); cxt.lineWidth = borderWidth; cxt.strokeStyle = borderColor; cxt.fillStyle = fillColor; cxt.fill (); cxt.stroke ();}

Running result:

Draw a rectangle using the rect () method

Hesitation to draw rectangles is a common method, so we have encapsulated a method of drawing rectangles-rect ()-in Canvas API. This method takes four parameters x, y, width, height, which is actually called

Context.rect (xpendium, widthand height)

Based on this, let's optimize the method just encapsulated.

Function drawRect (cxt, x, y, width, height, fillColor, borderWidth, borderColor) {cxt.beginPath (); cxt.rect (x, y, width, height); / / cxt.closePath (); closePath () cxt.lineWidth = borderWidth; cxt.strokeStyle = borderColor; cxt.fillStyle = fillColor; cxt.fill (); cxt.stroke ();}

Call the encapsulation method to draw a magic image

Let's have a magic image.

OK, let's operate on it, practice our hands, and exercise our muscles and bones in the method we just sealed.

Draw magic graphics your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.rect (0,0,800,600); context.fillStyle = "# AA9033"; context.fill () Context.beginPath (); for (var item0; I)

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.