CANVAS step by step: Basics
CANVAS step by step:
If you believe the English-Russian dictionary, you can find out that canvas is translated as canvas, and if you believe Wikipedia, you can find out that the canvas tag is an HTML 5 element that is intended to create a bitmap using JavaScript. How to create this bitmap image and my little text will be devoted. Before starting to try your hand at this difficult task, it is recommended that you already have a basic knowledge of what HTML is and what JavaScript is about.
Our experimental tag has only two attributes - height and width, height and width respectively, the default canvas size is 150x300 pixels.
It is worth noting that canvas creates a region of fixed size whose contents are controlled by contexts.
Elementary example:
If you save these unfortunate 13 lines to a file and open it with a browser, you can see the area with a black rectangle, so this is the canvas on which the rectangle is drawn with dimensions equal to the size of the canvas.
The most elementary figure you can draw is a rectangle. There are three functions for drawing rectangles.
An example illustrating the operation of these functions:
And now a brief line-by-line analysis:
in lines 10 and 11, we changed the size of the canvas - so that the image we planned was fully displayed,
in lines 12 and 13, we drew two not painted over rectangles that will symbolize a kind of frame of our “chessboard”,
in line 14 we draw a filled rectangle whose dimensions would allow to contain 64 squares with a side width of 32 pixels,
in lines 15 to 19, we have two cycles that clear square areas on the black rectangle in such a way that the resulting image would look like a chessboard
Drawing shapes made up of lines is performed sequentially in several steps:
beginPath is used to "start" a series of actions describing the drawing of a shape. Each new call to this method resets all the actions of the previous one and begins to “draw” again.
closePath is not an optional action, and in fact it is trying to complete drawing by drawing a line from the current position to the position from which it started drawing.
The final step is to call a stroke or fill method. Actually, the first one leads around the figure with lines, and the second fills the figure with a solid color.
Those who used to paint a house in school 486x in the past years in BASIC, a fence and a tree, as conceived by the teacher, will immediately understand the part below. So, there are methods such as
The example below shows the effect of everything described above:
In line 14, the arc is filled with color, in line 22 the outline of our crown is outlined.
')
What are Bezier curves, I think Wikipedia will explain better.
Two functions are available to us, for constructing the cubic Bizieux and quadratic curves, respectively:
x and y are the points to go to, and the coordinates of P (Px, Py) in a quadratic curve are additional points that are used to construct the curve. In a cubic curve, respectively, two additional points.
An example of two curves:
What would our image be not only two colors, but any color is provided, two properties
The color is set in the same way as css, for example, all four ways to set colors
The color for the lines is set in the same way.
Take the example of a chessboard and add some color to it:
In order to assimilate information and consolidate what I read in practice, I always set myself a small goal that at the same time covers everything I read and at the same time the process of achieving which would be interesting to me. In this case, I will try to draw the level of one of my favorite childhood games. Actually, for not having time - I will not add life to it, but I will make the most understandable code covering almost everything that I described here today.
I reproduced one of the levels of the game BattleCity known as Tanchiki , and here is a link to pastebin in case the dropbox doesn’t respond.
Lastly comment on the example. In the specifications of the picture that Dandy can give, the screen resolution should be 256 Ă— 240 pixels.
The battlefield in the well-known Tanchiki the size of 13x13 large blocks. Each of which is drawn by 4 repeating sprites (of which, according to a general calculation, the map is 26x26 = 676). So let's estimate how it was in the original by pixels and how to scale it correctly. If you divide 240 by 26, it turns out that the whole part of the division will be 8. It turns out that the dimension of the texture was 8x8 pixels, i.e. the size of the battlefield is 208x208, and the large block is 16x16. Width should be 256 pixels. Now we calculate the size of the right column with additional information and the size of the fields above / below. On the right, if you look closely, the width is in two blocks, for a total of 2 * 16 = 32. We already have 32 + 208 = 240 on the left, a field of 16, and below and above, respectively, also 16 pixels each. Actually, in my example, the dimension of a large block is enclosed in the cellSize variable, in fact, all calculations are made based on its size. You can experiment and change its value, I strongly recommend doing it in multiple powers of two (16, 32, 64, 128 ...), if you want everything to look like on the good old dandy, then set its value to 16. Although for any other values, everything looks fine. If then how I write will like someone other than me, I will write a sequel, but what I will keep in it for now
See the next series: CANVAS step by step: images
If you believe the English-Russian dictionary, you can find out that canvas is translated as canvas, and if you believe Wikipedia, you can find out that the canvas tag is an HTML 5 element that is intended to create a bitmap using JavaScript. How to create this bitmap image and my little text will be devoted. Before starting to try your hand at this difficult task, it is recommended that you already have a basic knowledge of what HTML is and what JavaScript is about.
Preliminary "customization" of our canvas
Our experimental tag has only two attributes - height and width, height and width respectively, the default canvas size is 150x300 pixels.
It is worth noting that canvas creates a region of fixed size whose contents are controlled by contexts.
Elementary example:
<!doctype html> <html> <head> <title>canvasExample</title> <meta charset='utf-8' /> </head> <body> <canvas height='320' width='480' id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); ctx.fillRect(0, 0, example.width, example.height); </script> </body> </html> If you save these unfortunate 13 lines to a file and open it with a browser, you can see the area with a black rectangle, so this is the canvas on which the rectangle is drawn with dimensions equal to the size of the canvas.
Rectangles
The most elementary figure you can draw is a rectangle. There are three functions for drawing rectangles.
strokeRect(x, y, , ) // fillRect(x, y, , ) // clearRect(x, y, , ) // An example illustrating the operation of these functions:
<!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.width = 640; example.height = 480; ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html> And now a brief line-by-line analysis:
in lines 10 and 11, we changed the size of the canvas - so that the image we planned was fully displayed,
in lines 12 and 13, we drew two not painted over rectangles that will symbolize a kind of frame of our “chessboard”,
in line 14 we draw a filled rectangle whose dimensions would allow to contain 64 squares with a side width of 32 pixels,
in lines 15 to 19, we have two cycles that clear square areas on the black rectangle in such a way that the resulting image would look like a chessboard
Lines and arcs
Drawing shapes made up of lines is performed sequentially in several steps:
beginPath() closePath() stroke() fill() beginPath is used to "start" a series of actions describing the drawing of a shape. Each new call to this method resets all the actions of the previous one and begins to “draw” again.
closePath is not an optional action, and in fact it is trying to complete drawing by drawing a line from the current position to the position from which it started drawing.
The final step is to call a stroke or fill method. Actually, the first one leads around the figure with lines, and the second fills the figure with a solid color.
Those who used to paint a house in school 486x in the past years in BASIC, a fence and a tree, as conceived by the teacher, will immediately understand the part below. So, there are methods such as
moveTo(x, y) // "" x, y lineTo(x, y) // , arc(x, y, radius, startAngle, endAngle, anticlockwise) // , x y , , The example below shows the effect of everything described above:
<!doctype html> <html> <head> <title>pathExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.arc(80, 100, 56, 3/4 * Math.PI, 1/4 * Math.PI, true); ctx.fill(); // *14 ctx.moveTo(40, 140); ctx.lineTo(20, 40); ctx.lineTo(60, 100); ctx.lineTo(80, 20); ctx.lineTo(100, 100); ctx.lineTo(140, 40); ctx.lineTo(120, 140); ctx.stroke(); // *22 </script> </body> </html> In line 14, the arc is filled with color, in line 22 the outline of our crown is outlined.
')
Bernstein-Bezier curves
What are Bezier curves, I think Wikipedia will explain better.
Two functions are available to us, for constructing the cubic Bizieux and quadratic curves, respectively:
quadraticCurveTo(Px, Py, x, y) bezierCurveTo(P1x, P1y, P2x, P2y, x, y) x and y are the points to go to, and the coordinates of P (Px, Py) in a quadratic curve are additional points that are used to construct the curve. In a cubic curve, respectively, two additional points.
An example of two curves:
<!doctype html> <html> <head> <title>curveExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.moveTo(10, 15); ctx.bezierCurveTo(75, 55, 175, 20, 250, 15); ctx.moveTo(10, 15); ctx.quadraticCurveTo(100, 100, 250, 15); ctx.stroke(); </script> </body> </html> Add colors
What would our image be not only two colors, but any color is provided, two properties
fillStyle = color // strokeStyle = color // css, The color is set in the same way as css, for example, all four ways to set colors
// ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)" The color for the lines is set in the same way.
Take the example of a chessboard and add some color to it:
<!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.strokeStyle = '#B70A02'; // ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillStyle = '#AF5200'; // ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html> Task
In order to assimilate information and consolidate what I read in practice, I always set myself a small goal that at the same time covers everything I read and at the same time the process of achieving which would be interesting to me. In this case, I will try to draw the level of one of my favorite childhood games. Actually, for not having time - I will not add life to it, but I will make the most understandable code covering almost everything that I described here today.
I reproduced one of the levels of the game BattleCity known as Tanchiki , and here is a link to pastebin in case the dropbox doesn’t respond.
Lastly comment on the example. In the specifications of the picture that Dandy can give, the screen resolution should be 256 Ă— 240 pixels.
The battlefield in the well-known Tanchiki the size of 13x13 large blocks. Each of which is drawn by 4 repeating sprites (of which, according to a general calculation, the map is 26x26 = 676). So let's estimate how it was in the original by pixels and how to scale it correctly. If you divide 240 by 26, it turns out that the whole part of the division will be 8. It turns out that the dimension of the texture was 8x8 pixels, i.e. the size of the battlefield is 208x208, and the large block is 16x16. Width should be 256 pixels. Now we calculate the size of the right column with additional information and the size of the fields above / below. On the right, if you look closely, the width is in two blocks, for a total of 2 * 16 = 32. We already have 32 + 208 = 240 on the left, a field of 16, and below and above, respectively, also 16 pixels each. Actually, in my example, the dimension of a large block is enclosed in the cellSize variable, in fact, all calculations are made based on its size. You can experiment and change its value, I strongly recommend doing it in multiple powers of two (16, 32, 64, 128 ...), if you want everything to look like on the good old dandy, then set its value to 16. Although for any other values, everything looks fine. If then how I write will like someone other than me, I will write a sequel, but what I will keep in it for now
See the next series: CANVAS step by step: images
Source: https://habr.com/ru/post/111308/
All Articles