js面向对象实现canvas制作彩虹球喷枪效果
前段时间在研究canvas，感觉还挺好玩的，就写了一个小demo，效果如下：
第一次尝试用js面向对象的方式来写，经验不足，还请大家多多包涵。
下面开始简单介绍代码：
canvas画布：
<canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas>
彩虹球的随机颜色是通过下面两个方法来实现的，在《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; //半径
在本案例中，鼠标相当于是彩虹球喷枪，我们也用面向对象的思想来设计它：
//RainbowBrush 彩虹球喷枪
RainbowBrush = function(){}
//生产小球数组的方法
RainbowBrush.prototype.getBalls = function(num){
var colorBalls = [];
for(var i = 0; i < num; i++){
var ball = new ColorBall();
colorBalls.push(ball);
}
return colorBalls;
}
//喷刷彩虹球
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();
})
}
它有两个方法，一个是生产彩虹球，另一个是喷刷彩虹球。
案例的主要逻辑如下：
var rainbowBrush = new RainbowBrush(); //初始化彩虹球喷枪
var balls = rainbowBrush.getBalls(1);
//当鼠标按下
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;
}
}
案例全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>彩虹球喷枪</title>
</head>
<body>
<canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas>
</body>
<script type="text/javascript">
/**
* 获取 0 ~ num的随机数（闭区间）
*/
function randomNum(num){
return Math.floor(Math.random()*(num+1));
};
/*
* 获取范围随机数 （闭区间）
*/
function randomRange(start,end){
return Math.floor(Math.random()*(end-start+1))+start;
};
/**
* 获取随机颜色（支持任意浏览器）
*/
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;
};
var canvasDom = document.getElementById('canvas');
var context = canvasDom.getContext('2d');
var maxWidth = 1050;
var maxHeight = 500;
//彩虹球的类
var ColorBall = function(){}
ColorBall.prototype.left = 0; //X轴
ColorBall.prototype.top = 0; //y轴
ColorBall.prototype.r = 10; //半径
//RainbowBrush 彩虹球喷枪
RainbowBrush = function(){}
//生产小球数组的方法
RainbowBrush.prototype.getBalls = function(num){
var colorBalls = [];
for(var i = 0; i < num; i++){
var ball = new ColorBall();
colorBalls.push(ball);
}
return colorBalls;
}
//喷刷彩虹球
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();
})
}
var rainbowBrush = new RainbowBrush(); //初始化彩虹球喷枪
var balls = rainbowBrush.getBalls(1);
//当鼠标按下
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;
}
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
归纳下js面向对象的几种常见写法总结
//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci
-
JavaScript之面向对象_动力节点Java学院整理
JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢? 当然不是.如果我们只使用Number.Array.string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力. JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念: 1.类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何
-
JS实现简单面向对象的颜色选择器实例
本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
JavaScript面向对象编写购物车功能
之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写. 接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为: 1.先定义好一个商品列表的数据形式和商品总数集,类似: var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type:
-
js实现对ajax请求面向对象的封装
AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在js中使用ajax请求一般包含三个步骤: 1.创建XMLHttp对象 2.发送请求:包括打开链接.发送请求 3.处理响应 在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写 <span style=&qu
-
js面向对象的写法
本文归纳了js面向对象的几种常见写法,分享给大家供大家参考,具体内容如下 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Circle
-
js面向对象实现canvas制作彩虹球喷枪效果
前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码 代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2
-
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g
-
使用canvas制作炫酷黑客帝国数字雨背景html+css+js
目录 制作: 1.定义canvas标签: 2.开始js部分,先定义变量: 3.初始化字符串数组,先给每条字符串位置,字符先不给: 4.绘制每条字符串: 5.更新字符串: 6.设置动画过程: 7.在窗口大小改变时,设置canvas画布能实时铺满屏幕: 完整代码: 制作: 1.定义canvas标签: <canvas id="canvas"></canvas> 2.开始js部分,先定义变量: /* 获取画布 */ var canvas = document.query
-
JavaScript+html5 canvas制作的百花齐放效果完整实例
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra
-
JavaScript+html5 canvas制作色彩斑斓的正方形效果
本文实例讲述了JavaScript+html5 canvas制作色彩斑斓的正方形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的透明度</t
-
js面向对象之公有、私有、静态属性和方法详解
现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式的编辑风格,对于闭包.原型总是说不清道不明．对于js面向对象蹩脚的用着,而要了解js面向对象,就必需先了解js中什么是公有方法.特权方法.静态方法 方法/步骤 1.公有属性和公有方法 function User(name,age){ this.name = name;//公有属性 this.age
-
JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { background:#F2F2F2; height:500px; height:500px; mar
-
js实现简单选项卡制作
本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下 实现功能 通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
-
Vue+Canvas制作简易的水印添加器小工具
目录 前言 效果展示 实现功能 实现思路 总结 前言 随着搬运工的逐渐增加,原创作者的利益收到了极大的影响.所以给图片或视频加上水印显得极其重要,他可以有效的维护原创作者的版权防止盗版.本文分享一个由canvas和vue.js制作的图片水印添加器. 效果展示 实现功能 自定义水印的文字及颜色,水印的位置,旋转角度,大小,透明度,是否重复显示,以及选择为重复时可以选择文字之间的水平间距和垂直间距,在设置为合适的图片时点击下载按钮即可下载得到完成图.如果觉得效果不好也可以点击重置按钮瞬间清屏.同时还
-
js+html5实现canvas绘制网页时钟的方法
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex