【js】2019.2.19元宵 canvas实现上浮气球（花灯）（未完）

javascript

昨日元宵，想着写个花灯许愿的网页，决定用canvas，上网查了一下别人的作品。
主要借鉴 https://www.oschina.net/code/snippet_114440_18423 的随机产生随机颜色的彩色气球的方法。奈何时间紧迫，未作修改也未能完成。特此记录，日后完善。（明年元宵前一定要弄好！）

以下是代码[非原创，有修改，仅作记录]

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>LIGHT UP</title>
</head>
<body><canvas id="canvas" width="862" height="720" style="background-color:rgb(0, 0, 78);">您的浏览器不支持canvas</canvas><style>body {margin: 0;padding: 0;}#canvas {display: block;margin: 0 auto;}</style><script>(function(){function createAnimate(cns){var cns = typeof cns === "string" ? document.getElementById(cns) : cns;var ctx = cns.getContext("2d");var w = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;var h = document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;cns.width = w;cns.height = h;ctx.width = w;ctx.height = h;// var getRandColor = function(){//     var str = "012345678abcdef";//     var color = "";//     for(;color.length < 2;){//         color += str.charAt(Math.floor(Math.random() * str.length));//     }//     return "#FE" + color + "91";// };var getRandColor = function(){var color1 = (Math.floor( 100 + Math.random() * 150)).toString();var color2 = (Math.floor( 100 + Math.random() * 150)).toString();var color3 = (Math.floor( 100 + Math.random() * 150)).toString();//console.log("rgb(" + color1 + ", " + color2 + ", " + color3 + ")");return "rgb(" + color1 + "," + color2 + "," + color3 + ")";};var createBall = function(ctx, x, y, r, sc){var x = x ? x : 10,y = y ? y : 10,r = r ? r : 8,sc = sc ? sc : "#e20000",pi = Math.PI;ctx.save();ctx.fillStyle = sc;ctx.beginPath();ctx.moveTo(x - r * Math.cos(0.133 * pi), y + r * Math.sin(0.133 * pi));ctx.arc(x, y, r, 0.867 * pi, 0.133 * pi, 0);ctx.lineTo(x, y + r * 2.8);ctx.closePath();ctx.shadowColor = sc;ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0.2 * r;ctx.shadowBlur = r;ctx.fill();ctx.restore();};var cs = [], rs = [], xs = [], ys = [];cs.push(getRandColor());rs.push(Math.floor(Math.random() * 10) + 10);xs.push(Math.random() * (w - 100) + 50);ys.push(h + Math.random() * 50);setInterval(function(){cs.push(getRandColor());rs.push(Math.floor(Math.random() * 10) + 10);xs.push(Math.random() * (w - 100) + 50);ys.push(h + Math.random() * 50);}, 2000);setInterval(function(){ctx.clearRect(0, 0, w, h);for(var i = 0; i < xs.length; i++){if(xs[i] < -20 || ys[i] < -80 || xs[i] > w + 20){xs.shift();ys.shift();rs.shift();cs.shift();}}ctx.fillStyle = "#fff";ctx.font = "16px 微软雅黑";ctx.fillText("当前窗口飘动着：" + cs.length + "个孔明灯。", 50, 50);for(var i = 0; i < cs.length; i++){createBall(ctx, xs[i] += Math.random() * 10 - 5, ys[i] -= Math.random() * 5, rs[i], cs[i]);}}, 100);}createAnimate("canvas");})();</script>
</body>
</html>

改动的地方：

灯的颜色以及背景的颜色

希望的功能

画出一个真正像模像样的孔明灯：光源实现
飘动轨迹应该可以用公式来表示？
镜头：刚放飞时灯少而大，而后镜头上移，小而多。

（由于太菜还没想到什么好方法，若有人能看到这篇博文，也希望留下见解与指导，诚心感谢！）

【js】2019.2.19元宵 canvas实现上浮气球（花灯）（未完）相关推荐

2019张小龙微信公开课精华整理（未完待续....）
看起来微信有很多跟别的不一样的地方,就像有一个朋友说,有一次在朋友圈里说,微信是互联网界的异类,所谓异类就是跟其他所有产品不一样. 我看到这句话觉得很惊讶,同时也觉得挺自豪的.自豪的是你是一个异类,表 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
[js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...
《深入浅出Ext JS》2.19全国首发
<深入浅出Ext JS>2.19全国首发 <深入浅出Ext JS>自选题立项以来,在JavaEye和博客园等知名技术社区内就已经引起了广泛的关注和强烈的反响.在写作和编辑阶段, ...
训练日志 2019.1.19
昨天回去发高烧了,睡了一上午还是烧,下午去打了个退烧针,回实验室补了几道题就回宿舍睡觉了,这几天由于身体状态不是很好,效率低的吓人,希望赶紧好起来吧下午补的几道题都是图论的,图论的题虽说有模版,但难 ...
html js 打印图片不显示 canvas
html js 打印图片不显示 canvas 出现这个原因是因为用的是 canvas 我们要将canvas 转成img 将之前的 canvas 替换掉 !!! 要打印的结构你们的结构可能和我不一 ...
深夜的士(2019/7/19)
阅读文本大概需要 4.2 分钟. 每次打车的时候我总是会和师傅聊上几句,感觉可以出一些系列文了,就叫[深夜的士]吧,为大家讲述平凡的生活不为人知的另一面,也依此记录我的上海生活. 深夜的士(2019/ ...
18天精读掌握《费曼物理学讲义卷一》第6天 2019.6.19
18天精读掌握<费曼物理学讲义卷一> 第6天 2019.6.19 1. 18日掌握<费曼物理学讲义>卷一计划概览 2. 今日学习成果 3. 今日时间表 4.Atimelogge ...

【js】2019.2.19元宵 canvas实现上浮气球（花灯）（未完）

javascript

【js】2019.2.19元宵 canvas实现上浮气球（花灯）（未完）相关推荐

最新文章

热门文章