HTML5 Canvas write colorful beads (2): Drawing

Okay, it's a new day. I just started to write a pen. It's so boring. :) yesterday we said we were going to draw a ball on the canvas. Well, this is the first step in getting started with the game, but it was not completed yesterday, so...

[Html]
<! DOCTYPE html>

<! DOCTYPE html> The above code was written on VS11 beta, which is so comfortable that vs is a very powerful editor. In the above Code, we drew a large circle and colored it with red edges and yellow hearts.
Let's take a look at the arc (radian) method. His link address is included in yesterday's article. I will paste it here.
The arc (x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc.
Arc (x, y, radian, start angle, end angle, clockwise). You may not know how to represent the Angle Point. Math is used here. PI circumference rate indicates that 6.28 is the circumference. If you want to draw a circle, that is, an arc, you can take the starting angle and ending angle.

The next step is to draw the circle on our board. In fact, this is very simple, as long as we adjust the values of x, y, and radius, we will draw them out. I wrote a little more "professional" code yesterday. Therefore, today's code will be added based on the new code. Let's take a look at the modified Code.

 

[Javascript]
Var canvas = document. getElementById ("canvas"); var ctx = canvas. getContext ("2d"); var g = {cellCount: 9, lineCount: 5,}; var map = {startX: 20.5, startY: 60.5, cellWidth: 30, getEndX: function () {return g. cellCount * this. cellWidth + this. startX;}, getEndY: function () {return g. cellCount * this. cellWidth + this. startY;}, draw: function () {ctx. beginPath (); ctx. moveTo (this. startX, this. startY); for (var I = 0; I <= g. cellCount; I ++) {var p1 = I * this. cellWidth + this. startX; ctx. moveTo (p1, this. startY); ctx. lineTo (p1, this. getEndY (); var p2 = I * this. cellWidth + this. startY; ctx. moveTo (this. startX, p2); ctx. lineTo (this. getEndX (), p2);} ctx. strokeStyle = "#456"; ctx. stroke () ;},}; map. draw ();

Var canvas = document. getElementById ("canvas"); var ctx = canvas. getContext ("2d"); var g = {cellCount: 9, lineCount: 5,}; var map = {startX: 20.5, startY: 60.5, cellWidth: 30, getEndX: function () {return g. cellCount * this. cellWidth + this. startX;}, getEndY: function () {return g. cellCount * this. cellWidth + this. startY;}, draw: function () {ctx. beginPath (); ctx. moveTo (this. startX, this. startY); for (var I = 0; I <= g. cellCount; I ++) {var p1 = I * this. cellWidth + this. startX; ctx. moveTo (p1, this. startY); ctx. lineTo (p1, this. getEndY (); var p2 = I * this. cellWidth + this. startY; ctx. moveTo (this. startX, p2); ctx. lineTo (this. getEndX (), p2);} ctx. strokeStyle = "#456"; ctx. stroke () ;},}; map. draw ();
Yes, it's more professional. In this way, we won't define a bunch of functions. We don't find them at that time, but define them in an object. This encapsulation can also avoid name conflicts. In addition, I have adjusted the start position of the Board. As long as the starting x y value is modified, the Board will start painting at this point. Now, how do we draw a yellow ball in the fifth and sixth columns? You only need to add a method to map and then call this method.

[Javascript]
DrawBubble: function (x, y) {var px = this. startX + this. cellWidth * x-this. cellWidth/2; var py = this. startY + this. cellWidth * y-this. cellWidth/2; ctx. beginPath (); ctx. arc (px, py, 12, 0, Math. PI * 2); ctx. strokeStyle = "white"; ctx. fillStyle = "yellow"; ctx. fill (); ctx. stroke ();},

DrawBubble: function (x, y) {var px = this. startX + this. cellWidth * x-this. cellWidth/2; var py = this. startY + this. cellWidth * y-this. cellWidth/2; ctx. beginPath (); ctx. arc (px, py, 12, 0, Math. PI * 2); ctx. strokeStyle = "white"; ctx. fillStyle = "yellow"; ctx. fill (); ctx. stroke ();},
When we figure it out and refresh it, it's actually the sixth row and the Fifth Column. Are we wrong? No code, but we mistakenly believe that x is a row of y, and columns are called in order, which is actually the opposite :)

Since bubbles can be painted, they must also be erased. Otherwise, they cannot be played, so we will add another method to clear bubbles.
 

[Javascript]
ClearBubble: function (x, y) {var px = this. startX + this. cellWidth * x-this. cellWidth + 0.5; var py = this. startY + this. cellWidth * y-this. cellWidth + 0.5; ctx. beginPath (); ctx. clearRect (px, py, this. cellWidth-1, this. cellWidth-1); ctx. stroke ();}

ClearBubble: function (x, y) {var px = this. startX + this. cellWidth * x-this. cellWidth + 0.5; var py = this. startY + this. cellWidth * y-this. cellWidth + 0.5; ctx. beginPath (); ctx. clearRect (px, py, this. cellWidth-1, this. cellWidth-1); ctx. stroke ();}
OK, isn't it domineering? O (fill _ fill) o Haha, but is it difficult to get the position of the bubble? Why is it necessary to add 0.5 to erase the bubble when it is width/2?
The circle is drawn from the center point, so we need to remove the radius, while the number of erasers cannot erase our board line, so we need to offset 0.5.

From Jun Zhiqiang