html5绘制草,利用html5实现canvas海底水草动画特效
特效描述:利用html5实现 canvas海底水草动画特效。利用html5实现canvas海底水草动画特效
代码结构
1. HTML代码
var canvas, ctx, width, height, stems, bubbles;
stems = [];
bubbles = [];
function Bubble(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
this.vy = -Math.random() * 5;
this.opacity = 0.2 + Math.random() * 0.5;
this.oldY = y;
}
Bubble.prototype.draw = function() {
var strokeColor, fillColor;
strokeColor = 'rgba(255, 255, 255,' + this.opacity + ')';
fillColor = 'rgba(255, 255, 255,' + (this.opacity / 2) + ')';
ctx.save();
ctx.lineWidth = 0.8;
ctx.strokeStyle = strokeColor;
ctx.fillStyle = fillColor;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
function Stem(points, color) {
this.points = points;
this.color = color;
}
Stem.prototype.draw = function(ctx) {
var len, ctrlPoint, point;
len = this.points.length - 1;
ctrlPoint = {x: 0, y: 0};
ctx.save();
ctx.strokeStyle = this.color;
ctx.beginPath();
ctx.moveTo(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y);
for (var i = len; i >= 1; i--) {
point = this.points[i];
ctrlPoint.x = (point.x + this.points[i - 1].x) / 2;
ctrlPoint.y = (point.y + this.points[i - 1].y) / 2;
ctx.quadraticCurveTo(point.x, point.y, ctrlPoint.x, ctrlPoint.y);
ctx.lineWidth = i * 1.1;
ctx.stroke();
ctx.fillStyle = 'red';
}
ctx.restore();
}
init();
function init(){
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
populateStems(height / 3, width, 25);
generateBubbles(50);
drawFrame();
};
function generateBubbles(bubblesLimit) {
for (var i = 0; i <= bubblesLimit; i++) {
bubbles.push(new Bubble(Math.random() * width, height + Math.random() * height / 2, 2 + Math.random() * 2));
}
}
function populateStems(offset, limit, step) {
for (var x = 0; x <= limit; x += step) {
generateStem(x, height / 2 - offset / 2 + Math.random() * offset, 50)
}
}
function generateStem(x, pointsLen, step) {
var positions, y, offset, colorsArr, color;
colorsArr = ['#6e881b', '#5d7314', '#54690f', '#657f0f', '#6f8f06'];
color = Math.floor(1 + Math.random() * colorsArr.length - 1);
positions = [];
if (height < 600) {
offset = -40 + Math.random() * 80;
for (y = height - pointsLen; y <= height + 100; y += step / 2) {
positions.push({x: x + offset / (y / 2000), y: y, angle: Math.random() * 360, speed: 0.1 + Math.random() * 0.3});
}
} else {
offset = -100 + Math.random() * 200;
for (y = height - pointsLen; y <= height + 100; y += step) {
positions.push({x: x + offset / (y / 2000), y: y, angle: Math.random() * 360, speed: 0.1 + Math.random() * 0.3});
}
}
stems.push(new Stem(positions, colorsArr[color]));
}
function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle = '#17293a';
ctx.fillRect(0, 0, width, height);
bubbles.forEach(moveBubble);
stems.forEach(function(stem) {
stem.points.forEach(movePoint);
stem.draw(ctx);
});
}
function moveBubble(bubble) {
if (bubble.y + bubble.radius <= 0) bubble.y = bubble.oldY;
bubble.y += bubble.vy;
bubble.draw(ctx);
}
function movePoint(point, index) {
point.x += Math.sin(point.angle) / (index / 2.2);
point.angle += point.speed;
}
html5绘制草,利用html5实现canvas海底水草动画特效相关推荐
- html5绘制草,html5 canvas海底水草动画
html5 canvas海底水草动画 代码片段: Stem.prototype.draw = function(ctx) { var len, ctrlPoint, point; len = this ...
- html 闪电的动态效果图,利用HTML5实现Canvas空中闪电动画特效
特效描述:利用HTML5实现 Canvas 空中闪电 动画特效.利用HTML5实现Canvas空中闪电动画特效 代码结构 1. 引入JS 2. HTML代码 /*=================== ...
- html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动 轨迹动画特效.html5运动轨迹,行星动画特效 代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
- HTML5 Canvas爱心表白动画特效
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽. 先看一下效果 <!doctype html> <html> <head> ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- html 自动滚动通知,利用CSS3实现文字滚动通知动画特效
特效描述:利用CSS3实现 文字滚动通知 动画特效.利用CSS3实现文字滚动通知动画特效 代码结构 1. HTML代码 .menu-list{list-style:none; width:300px; ...
最新文章
- [MATLAB粒子模拟笔记]粒子坐标速度初始化
- 360浏览器5兼容模式吗_个独模式真能将企业总体税负降低至5%吗,为何大家都热衷核定征收...
- Java——线程的四种不同形式
- excel有的单元文字可以超出单元格_excel单元格斜线
- 图像扩充边界_使用机器学习来索引数十亿图像中的文本
- STM32——项目需求之低功耗的停机模式
- PHP+MySQL实现读写分离
- python包管理多个版本,python多版本以及各种包管理
- STC15单片机功能和应用电路
- Birt分类汇总报表(CUBES)空值转换为0
- MySQL中的B+树索引结构
- Android对控件进行隐藏
- [BZOJ3653]谈笑风生 主席树
- MAC版“迅雷 意外退出”
- 王牌战争服务器维护中多少才能玩,王牌战争最低配置要求一览 什么手机可以玩...
- 计算机金融专业排行榜,2020金融学专业大学排名 中国金融专业大学100强
- RISC-V IDE MRS使用笔记(七) :常用开发技巧汇总
- 湖大重现L.Cracked Pipes
- Eclipse开发工具的基本介绍及使用
- salsa20/12流密码matlab实现,流密码的故障攻击
热门文章
- SecureRT串口调试工具COM口不够用的问题
- 基于linux+vscode+.net core+ionic4技术开发的物流与工厂智能化应用-订单跟踪(一)
- itchat库 账号安全无法登陆网页微信
- SAP顾问学院-行业信息化解决方案 [转]
- js算法 -- 买股票
- linux 精简系统 存储,系统运维|在LVM中设置精简资源调配卷(第四部分)
- X11 Xlib截屏代码所遇问题及初步分析
- 双录、可回溯政策再升级,元核云音视频产品护航金融交易合规高效
- 医学图像处理中的深度学习模型
- 如何改变uniapp中checkbox样式