用canvas制作彩虹球喷枪,js面向对象实现canvas制作彩虹球喷枪效果

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下:

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下:

图片 1canvas.gif

图片 2

第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵。

第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵。 

下面开始简单介绍代码:

下面开始简单介绍代码: 

canvas画布:

canvas画布:

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

复制代码 代码如下:

彩虹球的随机颜色是通过下面两个方法来实现的,在《js常用方法和一些封装 —
随机数生成》中曾经提到过。

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

/** * 获取 0 ~ num的随机数 */function randomNum{ return Math.floor(Math.random);};/** * 获取随机颜色 */function randomColor16(){ //0-255 var r = randomNum.toString; var g = randomNum.toString; var b = randomNum.toString; //255的数字转换成十六进制 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;}; 

彩虹球的随机颜色是通过下面两个方法来实现的,在《js常用方法和一些封装(2)
— 随机数生成》中曾经提到过。

每当我鼠标点下,其实是在一个矩形区域随机产生不同颜色的彩虹球,彩虹球出现的位置也是随机的,通过范围随机数来实现:

 /**
 * 获取 0 ~ num的随机数(闭区间)
 */
function randomNum(num){
 return Math.floor(Math.random()*(num+1));
};

/**
 * 获取随机颜色(支持任意浏览器)
 */
function randomColor16(){
 //0-255 
 var r = randomNum(255).toString(16);
 var g = randomNum(255).toString(16);
 var b = randomNum(255).toString(16);
 //255的数字转换成十六进制
 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;
}; 
/* * 获取范围随机数  */function randomRange(start,end){ return Math.floor(Math.random()*(end-start+1))+start;};

       

接下来是彩虹球的类,用面向对象来做。

每当我鼠标点下,其实是在一个矩形区域随机产生不同颜色的彩虹球,彩虹球出现的位置也是随机的,通过范围随机数来实现:

//彩虹球的类var ColorBall = function(){}ColorBall.prototype.left = 0; //X轴ColorBall.prototype.top = 0; //y轴ColorBall.prototype.r = 10; //半径
 /*
 * 获取范围随机数 (闭区间)
 */
function randomRange(start,end){
 return Math.floor(Math.random()*(end-start+1))+start;
}; 

发表评论

电子邮件地址不会被公开。 必填项已用*标注