吓人代码html,HTML5 canvas幽灵鬼魂动画代码 (吓人的效果)
【实例简介】
【实例截图】
【核心代码】
HTML5 canvas幽灵鬼魂动画代码 - 源码之家
canvas {
position: fixed;
top: 0;
left: 0;
}
var blobs = [];
function setup() {
var iHeight = window.innerHeight;
if (iHeight < 500) {
iHeight = 500;
}
createCanvas(window.innerWidth, iHeight);
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 60;
drawingContext.shadowColor = "rgb(255, 176, 190)";
for (var i = 0; i < 13; i ) {
blobs.push(new Blob(random(width), random(height)));
}
}
function draw() {
background(13, 33);
for (var b = 0; b < blobs.length; b ) {
blobs[b].update();
blobs[b].show();
}
}
function Blob(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D();
this.vel.mult(random(1, 3));
this.r = random(42, 72);
this.yoff = random(1000);
this.update = function() {
this.pos.add(this.vel);
if (this.pos.x > width || this.pos.x < 0) {
this.vel.x *= -1;
}
if (this.pos.y > height || this.pos.y < 0) {
this.vel.y *= -1;
}
}
this.show = function() {
noStroke();
fill(255);
push();
translate(this.pos.x, this.pos.y);
beginShape();
var xoff = 0;
for (var a = 0; a < TWO_PI; a = 0.1) {
var offset;
if (a > PI/6 && a < 5 * PI/6) {
offset = map(noise(xoff, this.yoff), 0, 1, -0.31 * this.r, 0.78 * this.r);
} else {
offset = map(noise(xoff, this.yoff), 0, 1, -0.08 * this.r, 0.08 * this.r);
}
var r = this.r offset;
var x = r * cos(a);
var y = r * sin(a);
vertex(x, y);
xoff = 0.1;
}
endShape(CLOSE);
this.yoff = 0.08;
pop();
var eyeOffset = 0.23 * this.r;
stroke(54);
fill(54);
ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);
ellipse(this.pos.x eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);
strokeWeight(4);
line(this.pos.x - eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);
line(this.pos.x eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);
fill(255);
noStroke();
ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);
ellipse(this.pos.x eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);
fill(54);
arc(this.pos.x, this.pos.y, 0.5 * this.r, 0.5 * this.r, 0, PI);
}
}
更多源码:源码之家
吓人代码html,HTML5 canvas幽灵鬼魂动画代码 (吓人的效果)相关推荐
- html5绘制草,html5 canvas海底水草动画
html5 canvas海底水草动画 代码片段: Stem.prototype.draw = function(ctx) { var len, ctrlPoint, point; len = this ...
- html echart完整代码,html5 echarts仪表盘图标动画代码
特效描述:html5 echarts仪表盘 图标动画代码.html5 echarts仪表盘图标动画代码 代码结构 1. 引入JS 2. HTML代码 // 基于准备好的dom,初始化echarts图表 ...
- html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制 曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
- 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 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶 光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
- html5 水效果图,HTML5 canvas水波纹动画插件waterrippleeffect.js
插件描述:这是一款HTML5 canvas水波纹动画特效.该水波纹动画以插件的形式进行编写,可以是纯js插件,或通过jquery插件来进行调用.它能够制作出逼真的水波纹动画效果 使用方法 在页面中引入 ...
最新文章
- gcc中-pthread和-lpthread的区别
- Inno Setup 系列之安装、卸载时调用bat
- IE这回在css flex中扳回一局?
- Vue实现访问百度音乐API实现播放音乐功能
- 什么是 操作系统 自举?
- .netframework3.5 中TimeZoneInfo 类的使用
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第20篇]Merkle-Damgaard hash函数如何构造
- Python pytest框架之@pytest.fixture()和conftest详解
- 【译】数据结构中关于树的一切(java版)
- Python:程序设计方法学、体育竞技分析
- 数据库的跨平台设计(转)
- 最新JCR期刊影响因子及分区情况(中科院SCI期刊分区表)
- 有线电视与计算机网都是光缆吗,【有线电视论文】计算机管理有线电视光缆数据意义分析(共4443字)...
- windows系统ftp服务器,Windows下使用的FTP服务器软件
- ASME Y14.5 2018重要更新
- 网络传输介质和常见的设备
- Syn-QG: Syntactic and Shallow S emantic Rules for Question Generation阅读笔记
- c++实验三:继承与派生
- hyper-v虚拟机开启失败导致无网络或进入公司内网后无网络
- linux转化大小写,linux转换大小写
热门文章
- “AD2”流量家一款提升网站流量的工具。免费使用,还可以赚钱。安全、稳定、可靠
- jquery如何获取innerHTML
- 如何充分利用每天的零碎时间
- Revit中的族不能剪切构件怎么办?建模助手的一键剪切功能
- 云计算中封闭式的Java部署模型 | CORE JAVA WEEK
- Cmake + CMakeLists.txt 编译SO库(JNI编译)
- java如何使用JWE进行加密
- java 字符串 大括号_字符串解析其中的嵌套大括号
- 自学Android开发(一)
- mysql paas化,一文彻底搞懂dbPaaS