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 相关文章推荐
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 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
php ci框架验证码实例分析
2013/06/26 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Javascript - HTML的request类
2007/01/09 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python3.x中自定义比较函数
2015/04/24 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
铁路安全事故反思
2014/04/26 职场文书
12岁生日演讲稿
2014/05/14 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
求职信范文怎么写
2015/03/19 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python