canvas实现爱心和彩虹雨效果


Posted in Javascript onMarch 09, 2017

效果图:

canvas实现爱心和彩虹雨效果

代码如下:

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
 <canvas id="canvas"></canvas>
 <script>
 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);
 });
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
js身份证验证超强脚本
Oct 26 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
js实现登录框鼠标拖拽效果
Mar 09 #Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 #Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 #Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 #Javascript
You might like
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
使用php实现截取指定长度
2013/08/06 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
利用php输出不同的心形图案
2016/04/22 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
通过循环优化 JavaScript 程序
2019/06/24 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python requests库用法实例详解
2018/08/14 Python
python3下载抖音视频的完整代码
2019/06/05 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python基于socket函数实现端口扫描
2020/05/28 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
法律进企业活动方案
2014/03/04 职场文书
被告代理词范文
2015/05/25 职场文书
春风化雨观后感
2015/06/11 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Elasticsearch 批量操作
2022/04/19 Python