html5 制作神器,HTML5/Canvas 简单的泡沫生成器
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var canvas = document.getElementById('mainc');
var context = canvas.getContext('2d');
canvas.width = $(window).width();
canvas.height = $(window).height();
var started = false;
var bubbleCount = 0;
var bubs = [];
$(document).ready(function() {
bubbleCount = $('#range').val();
start();
});
var toggle = function() {
if (started == true) {
stop();
} else {
bubbleCount = $('#range').val();
start();
}
}
var stop = function() {
clearInterval(main);
clearCanvas();
bubs = [];
started = false;
}
var start = function() {
started = true;
createBubbles();
drawBubbles(bubs);
main = setInterval(function() {
clearCanvas();
moveBubbles();
drawBubbles();
}, 16);
}
var createBubbles = function() {
for (i = 0; i < bubbleCount; i++) {
var vary = codes();
bubs.push(new bubble(vary.centerX, vary.centerY, vary.radius, vary.vx, vary.vy));
}
}
var codes = function() {
var centerX = Math.floor((Math.random() * canvas.width) + 1);
if (centerX > canvas.width - 10) {
centerX = centerX - 10;
}
if (centerX < 10) {
centerX = centerX + 10;
}
var centerY = Math.floor((Math.random() * canvas.height) + 1);
var radius = Math.floor((Math.random() * 10) + 3);
var vx = Math.floor((Math.random() * 10) - 5);
var vy = -Math.floor((Math.random() * 100) + 1);
return {
centerX: centerX,
centerY: centerY,
radius: radius,
vx: vx,
vy: vy
};
}
function bubble(centerX, centerY, radius, vx, vy) {
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.vx = vx;
this.vy = vy;
return this;
}
var drawBubbles = function() {
$.each(bubs, function(i, val) {
context.beginPath();
context.arc(val.centerX, val.centerY, val.radius, 0, 2 * Math.PI, false);
context.fill = '#6ECFF6'
context.lineWidth = 1;
context.shadowColor = '#555555';
context.shadowBlur = 4;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.strokeStyle = '#7D7D7D';
context.stroke();
});
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
var moveBubbles = function() {
$.each(bubs, function(i, val) {
val.centerY += (val.vy / 50);
if (val.centerY < 0) {
val.centerY = canvas.height + 15;
}
val.centerX += (val.vx / 50);
if (val.centerX - val.radius < 0) {
val.vx = -val.vx;
}
if (val.centerX + val.radius > canvas.width) {
val.vx = -val.vx;
}
});
}
var bubblechange = function(value) {
if (value > bubs.length) {
var vary = codes();
bubs.push(new bubble(vary.centerX, vary.centerY, vary.radius, vary.vx, vary.vy));
bubblechange(value);
}
if (value < bubs.length) {
bubs.pop();
bubblechange(value);
}
}
html5 制作神器,HTML5/Canvas 简单的泡沫生成器相关推荐
- html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
- 用html5制作叮当猫,html5 canvas 实现一个简单的叮当猫头部
face.fillStyle= '#07beea';//设置填充颜色 face.fill();//填充 face.lineWidth= 2;//轮廓线宽度 face.strokeStyle= '#33 ...
- html5制作线路图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等 最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图 何问起 canvas画简单电路图 by 何问起 [相关推荐] 1. 特别推荐:"php程序员工具箱& ...
- 在线html5制作场景,html5 canvas超逼真3d动画场景
这是一个使用Html5 canvas制作的相当真实的3d动画场景效果.canvas由js在运行时动态生成. HTML Look around by dragging and holding the m ...
- html5网页制作电脑版,页未央HTML5制作神器PC版
腾牛网在此提供页未央电脑版,它是一款由新浪倾情打造的创意html5页面制作工具.设定一个场景,挑选一套模板,键入两行文字,替换几张图片,搭配一曲音乐,一分钟即可实现你的情感表达诉求. 安装说明: 1. ...
- html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效
简单做出HTML5翻页效果文字特效 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...
- html5动态连线,canvas简单连线动画的实现代码
前言:canvas动画入门系列之简单连线动画.虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通. step1:绘制点 首先创建个标签 设置几个点的坐标 const points = ...
- 怎么用html5制作申请表,html-5 表格的制作
<html-5 表格的制作>由会员分享,可在线阅读,更多相关<html-5 表格的制作(6页珍藏版)>请在人人文库网上搜索. 1.教学项目五 HTML中表格的制作[教学内容]讲 ...
- html5制作线路图,HTML5画电路图
画图API的应用,线,圆等 http://t.cn/RGfhSlO 1.[代码][JavaScript]代码 何问起 var canvas = document.getElementById(&quo ...
最新文章
- python语言入门m-python基础入门这一篇就够
- PowerEdge R730安装Windows server2008 R2操作系统
- 使用Apple的感受
- c 语言 指针 指向数组,C 指向数组的指针
- Y1066 Ble Master Client 记录
- PHP实现带重试功能的curl连接示例
- UML 中各种图形重要性的排行
- 【AudioVideo】处理音频输出的变化(13)
- 帮助罕见病患者买得到药 京东健康上线“罕见病关爱中心”
- mysql去重操作哪个最快_如何将 MySQL 去重操作优化到极致?| CSDN 博文精选
- java应用安全设计_应用层安全架构设计-访问控制
- ZJU PTA ds 6-1 Percolate Up and Down
- Windows 下Nexus搭建Maven私服
- Tomcat之点击startup.bat出现闪退的解决办法
- JAVA毕设项目九宫格日志网站(java+VUE+Mybatis+Maven+Mysql)
- 【云扩RPA】HowToEmailAutomation
- ACM解题的一些技巧和方法
- pycharm定义空的二维数组_数组与面向对象
- 如何区分显卡新旧和配置?
- ubuntu12.04安装puppet foreman