html canvas爱心雨,canvas实现爱心和彩虹雨的效果
本文主要介绍了canvas实现爱心和彩虹雨效果的实例,具有很好的参考价值。下面一起来看下吧
效果图:
代码如下:
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasW = canvas.width = window.innerWidth,
canvasH = canvas.height = window.innerHeight,
canvasWHalf = canvasW / 2,
canvasHHalf = canvasH / 2,
xoff = canvasWHalf - 306,
yoff = 50,
bg = '00061a',
id = 0,
raindrops = [],
minSize = 1,
maxSize = 4,
minSpeed = 5,
maxSpeed = 20,
minHue = 0,
maxHue = 360,
maxAmount = 50;
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
return Math.floor(Math.random() * (max - min) min);
}
function hexToRGB(hex, opacity) {
var rgb = '';
hex.match(/.{2}/g).forEach(function(n) {
rgb = (parseInt(n, 16)) ',';
});
return 'rgba(' rgb opacity ')';
}
function draw() {
// Heart
ctx.fillStyle = hexToRGB(bg, '0.1');
ctx.beginPath();
// Left half
ctx.moveTo(0, 0);
ctx.lineTo(canvasWHalf, 0);
ctx.lineTo(304 xoff, 97 yoff);
ctx.bezierCurveTo(282 xoff, -5 yoff, 80 xoff, -6 yoff, 76 xoff, 165 yoff);
ctx.bezierCurveTo(74 xoff, 251 yoff, 184 xoff, 300 yoff, 304 xoff, 447 yoff);
ctx.lineTo(canvasWHalf, canvasH);
ctx.lineTo(0, canvasH);
// Right half
ctx.moveTo(canvasW, 0);
ctx.lineTo(canvasWHalf, 0);
ctx.lineTo(304 xoff, 97 yoff);
ctx.bezierCurveTo(326 xoff, 5 yoff, 528 xoff, 6 yoff, 532 xoff, 165 yoff);
ctx.bezierCurveTo(534 xoff, 251 yoff, 424 xoff, 300 yoff, 304 xoff, 447 yoff);
ctx.lineTo(canvasWHalf, canvasH);
ctx.lineTo(canvasW, canvasH);
ctx.closePath();
ctx.fill();
// Raindrops
for (var i = 1; i < id; i ) {
raindrops[i].fall();
};
}
var Raindrop = function() {
id ;
this.y = random(-canvasH);
this.x = random(canvasW);
this.size = random(minSize, maxSize);
this.speed = random(minSpeed, maxSpeed);
this.color = 'hsl(' random(minHue, maxHue) ',100%,55%)';
this.origColor = this.color;
this.id = id;
raindrops[id] = this;
};
Raindrop.prototype.fall = function() {
this.y = this.speed;
if (this.y >= canvasH) {
this.y = random(-canvasH);
this.x = random(canvasW);
}
ctx.save();
ctx.beginPath();
var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(0.5, this.color);
gradient.addColorStop(1, hexToRGB(bg, 0));
ctx.rect(this.x, this.y, this.size, maxSpeed);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.restore();
};
(function init() {
ctx.fillStyle = '#' bg;
ctx.fillRect(0, 0, canvasW, canvasH);
for (var i = 0; i < maxAmount; i ) {
new Raindrop();
}
}());
function animate() {
draw();
window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);
function mouseTrail(x, y) {
ctx.save();
ctx.globalCompositeOperation = 'overlay';
ctx.fillStyle = 'rgba(255,255,255,0.1)';
ctx.arc(x, y, 50, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
window.addEventListener('mousemove', function(cursor) {
mouseTrail(cursor.x, cursor.y);
});
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注jquery中文网!
相关推荐:
在canvas上实现元素图片镜像翻转动画效果的方法
HTML5 canvas绘制五角星的方法
html canvas爱心雨,canvas实现爱心和彩虹雨的效果相关推荐
- python代码雨_pygame实现烟雨蒙蒙下彩虹雨
学习了一天的深度学习,略有疲惫,我们用pygame搞个小游戏放松放松吧.今天我们的游戏主体是烟雨蒙蒙下彩虹雨,仿佛置身江南水乡. 游戏描述 我们希望看到江南水乡下起彩虹雨.这里背景是江南水乡,烟雨蒙蒙 ...
- 用html语言编写彩虹雨流动代码,canvas实现爱心和彩虹雨效果
效果图: 代码如下: var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), canvasW = ...
- 用html语言编写彩虹雨流动代码,前端H5 canvas 爱心和彩虹雨
/p> var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), canvasW = canv ...
- 520表白html,html5 canvas全屏的520爱心表白网页代码
特效描述:html5 canvas全屏 520爱心表白 网页代码.html5 canvas制作520表白日,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效. 代码结构 1. HTML代码 ...
- Canvas和JavaScript实现动态爱心粒子效果
爱心代码 简述: 这段代码利用Canvas和JavaScript实现了一个简单的粒子效果,通过绘制爱心形状的粒子并随机生成.更新.绘制粒子,最终形成一个动态的爱心粒子效果.以下是代码的简要分析: 代码 ...
- HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- 数字彩虹雨java代码_canvas实现爱心和彩虹雨效果
效果图: 代码如下: var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), canvasW = ...
- Canvas学习笔记 Canvas的基础知识点
文章目录 前言 一.导航 初始化 属性与方法 小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
- html5 canvas消除锯齿,HTML5 Canvas 如何取消反锯齿绘图
一.问题的提出 我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...
最新文章
- CSS 外补白(Margin) 内补白(Padding) 边框属性 定位(positioning)属性 布局(layout)属性
- c# wpf listbox 高度_WPF快速入门系列(1)——WPF布局概览
- ppct各代表什么_半导体50指数_股票大盘分时图中白线和黄线各代表什么?
- .NET Core 3.0之深入源码理解HealthCheck(一)
- java 实现excel样式设置(居中、字体、大小、换行、合并行,列宽、指定特定字符串样式等)
- 揭秘任务型对话机器人(下篇)
- 没有bug队——加贝——Python 59,60
- 刚刚!阿里云宣布2021要“做厚中台”!有哪些书值得读?
- Python之路(运算符)
- delphi 中文转 ascii编码_【转】Python 中文编码
- 一个文件版的名片管理系统(Python3)
- rabbitmq 延迟队列的实现(PHP)http://blog.yuhai.win
- java6可以玩儿我的世界吗_我的世界Java1.16预发行版6下载_我的世界Java1.16预发行版6官方游戏下载 v1.17.30.94571-菜鸟下载...
- C++构造函数详解(复制构造函数)
- 私有云和服务器虚拟化的区别,私有云和服务器有什么区别
- 计算机中的云指的是什么,古语有云,古语有云中的云指的是什么
- <img>标签上title属性与alt属性的区别
- 生态 | 南大通用GBase 8a与Suma完成兼容性互认证
- Spring Cloud Gateway 整合 knife4j 聚合接口文档
- Keil自定义关键字、快捷键···
热门文章
- Golang基础 一揽子方案
- 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)
- Python课后作业 2. 旋转魔方阵(文件) ---- (第七次作业)
- TokenInsight BTC永续合约流动性实时数据 | TokenInsight
- linux 逻辑分析仪,可实时显示所有SPI通信的逻辑分析仪,一个更好的SPI调试器SPIDriver上手体验...
- 转载-详解功率MOS管参数
- Java web对试卷进行单选多选答题进行打分_中考地理:简答题丢分严重,25个标准答题模板,记熟掌握拿满分!...
- Aspose.PDF企业案例:Canopy 使用 Aspose.PDF for .NET 设法匿名化 PDF 文件中的敏感信息
- NanoPC-T4|Android-Q Mali-T860 GPU驱动
- Modbus协议与SerialPort端口读写