JS Object-oriented implementation _javascript technique of canvas making rainbow ball Lance

Some time ago in the research canvas, the feeling is quite fun, wrote a small demo, the effect is as follows:

The first attempt to use the JS object-oriented approach to write, lack of experience, but also let everyone forgive.

Let's start with a simple introduction to the code:

Canvas Canvas:

Copy Code code as follows:

<canvas id= ' canvas ' width= ' 1050 height= ' style= ' background: #333; overflow:hidden; ' ></canvas>

The random color of rainbow ball is achieved by the following two methods, in the "JS common methods and some packages (2)-random number generation" has been mentioned.

 /**
 * gets 0 ~ num random number (closed range)/
function randomnum (num) {return
 Math.floor (Math.random () * (num+1));

/**
 * gets random color (supports any browser)
 /
function randomColor16 () {
 //0-255 
 var r = randomnum (255). ToString ();
 var g = randomnum (255). ToString ();
 var B = randomnum (255). ToString ();
 The number of 255 converts to hexadecimal
 if (r.length<2) R = "0" +R;
 if (g.length<2) g = "0" +G;
 if (b.length<2) b = "0" +B;
 Return "#" +R+G+B;
 

Every time I click on the mouse, in fact, in a rectangular area randomly generated rainbow balls of different colors, rainbow Ball appears in the position is random, through the range of random numbers to achieve:

 
 * * Get range random number (closed range)
 /
function Randomrange (start,end) {return
 Math.floor (Math.random () * ( end-start+1)) +start;
 

Next comes the Rainbow Ball class, which is done with object-oriented.

 Rainbow Ball's class
var colorball = function () {}

ColorBall.prototype.left = 0;//x axis
ColorBall.prototype.top = 0;//y axis C4/>COLORBALL.PROTOTYPE.R = 10; Radius 

In this case, the mouse is the equivalent of a rainbow ball gun, and we also use object-oriented thinking to design it:

 Rainbowbrush Rainbow Ball gun
Rainbowbrush = function () {}

//method for producing a small ball array
RainbowBrush.prototype.getBalls = function (num) {
 var colorballs = [];
 for (var i = 0; i < num i++) {
  var ball = new Colorball ();
  Colorballs.push (ball);
 }
 return colorballs;
}

Spray Brush Rainbow Ball
RainbowBrush.prototype.brush = function (context,balls,x,y) {
 Balls.foreach (function (Balliem) {
  balliem.x = Randomrange (x-6,x + 6);
  BALLIEM.Y = Randomrange (y-6,y + 6);
  BALLIEM.R = 5;
  
  Context.beginpath ();
  Context.fillstyle=randomcolor16 ();
  Context.arc (balliem.x,balliem.y,balliem.r,0,math.pi*2);
  Context.fill ();
 })
 
} 

It has two methods, one is to produce rainbow ball, the other is to brush the rainbow ball.

The main logic of the case is as follows:

 var rainbowbrush = new Rainbowbrush (); Initialize Rainbow ball Lance
var balls = rainbowbrush.getballs (1);

When the mouse presses
canvasdom.onmousedown = function () {
 var flag = true;
 Canvasdom.onmousemove = function (e) {
  var x = e.clientx;
  var y = e.clienty;
  if (flag) Rainbowbrush.brush (context,balls,x,y);
 }
 
 Canvasdom.onmouseup = function () {
  flag = false;
 }
} 

Case All code:

 <! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.