目录标题

演示端午由来部分源码讲解定义必要参数设置对特定文字烟花表演设置随机颜色制作心型烟火点击直接资料领取

演示

端午由来

端午节，又称端阳节、龙舟节、重五节、天中节等，是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。端午节源于自然天象崇拜，由上古时代祭龙演变而来。仲夏端午，苍龙七宿飞升于正南中央，处在全年最“中正”之位，正如《易经·乾卦》第五爻：“飞龙在天”。端午是“飞龙在天”吉祥日，龙及龙舟文化始终贯穿在端午节的传承历史中。端午节是流行于中国以及汉字文化圈诸国的传统文化节日， 传说战国时期的楚国诗人屈原在五月初五跳汨罗江自尽，后人亦将端午节作为纪念屈原的节日；也有纪念伍子胥、曹娥及介子推等说法。端午节的起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵，在传承发展中杂糅了多种民俗为一体，各地因地域文化不同而又存在着习俗内容或细节上的差异。端午节与春节、清明节、中秋节并称为中国四大传统节日。端午文化在世界上影响广泛，世界上一些国家和地区也有庆贺端午的活动。5月，国务院将其列入首批国家级非物质文化遗产名录；自起，被列为国家法定节假日。9月，联合国教科文组织正式批准将其列入《人类非物质文化遗产代表作名录》，端午节成为中国首个入选世界非遗的节日。

部分源码讲解

定义必要参数

var canvas = $('#canvas')[0];canvas.width = $(window).width();canvas.height = $(window).height();var ctx = canvas.getContext('2d');// resize$(window).on('resize', function() {canvas.width = $(window).width();canvas.height = $(window).height();ctx.fillStyle = '#000003';ctx.fillRect(0, 0, canvas.width, canvas.height);center = {x: canvas.width / 2, y: canvas.height / 2 };});// initctx.fillStyle = '#000003';ctx.fillRect(0, 0, canvas.width, canvas.height);// objectsvar listFire = [];var listFirework = [];var listText = [];var listSpecial = [];var listSpark = [];var lights = [];var fireNumber = 10;var center = {x: canvas.width / 2, y: canvas.height / 2 };var range = 100;var fired = 0;var onHold = 0;var supprise = false;var textIndex = 0;var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];for (var i = 0; i < fireNumber; i++) {var fire = {x: Math.random() * range / 2 - range / 4 + center.x,y: Math.random() * range * 2.5 + canvas.height,size: Math.random() + 0.5,fill: '#ff3',vx: Math.random() - 0.5,vy: -(Math.random() + 4),ax: Math.random() * 0.06 - 0.03,delay: Math.round(Math.random() * range) + range * 4,hold: false,alpha: 1,far: Math.random() * range + (center.y - range)};fire.base = {x: fire.x,y: fire.y,vx: fire.vx,vy: fire.vy};//listFire.push(fire);// play soundplayLaunchSound();}// define array of soundvar listExpSound = $('audio.exp');var listLaunchSound = $('audio.launch');// define array position of textvar textString = 'HAPPY';var textMatrix = [4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,5, 2, 6, 2, 7, 2, 8, 2]var chars = {h: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 3, 2, 3, 3, 3, 4, 3,5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7],a: [2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5],p: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4],y: [0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1],l: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 7, 2, 7, 3, 7, 4, 7, 5, 7],u: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,1, 7, 2, 7, 3, 7, 4, 7,5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6],n: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7],e: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 0, 2, 0, 3, 0, 4, 0, 5, 0,1, 3, 2, 3, 3, 3, 4, 3,1, 7, 2, 7, 3, 7, 4, 7, 5, 7],w: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6],r: [0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,1, 5, 2, 5, 3, 6, 4, 6, 5, 7],2: [0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6],0: [0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,1, 0, 2, 0, 3, 0, 4, 0,1, 7, 2, 7, 3, 7, 4, 7,5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6],1: [1, 2, 2, 2, 2, 1, 3, 1, 3, 0,4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,1, 7, 2, 7, 3, 7, 5, 7],7: [0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,5, 1, 5, 2, 5, 3, 4, 3, 4, 4,3, 4, 3, 5, 3, 6, 3, 7]}

设置对特定文字烟花表演

function initText() {var i = textIndex;var velocity = Math.random() * 0.25 + 1;var shift = {x: -(Math.random() + 2), y: -(Math.random() + 3) };var char = chars[textString[i]];var width = 80;var half = 6.5 * width;var left = textMatrix[i * 2] * width - half;var top = textMatrix[i * 2 + 1] * range * 1.2 - range * 2.4;for (var j = 0; j < fireNumber * char.length * 0.25; j++) {var rand = Math.floor(Math.random() * char.length * 0.5);var x = char[rand * 2] + shift.x;var y = char[rand * 2 + 1] + shift.y;var text = {x: center.x + left * 0.9,y: center.y + top,left: center.x + left,size: Math.random() + 0.5,fill: '#ff3',vx: x * (velocity + (Math.random() - 0.5) * 0.5),vy: y * (velocity + (Math.random() - 0.5) * 0.5),ay: 0.08,alpha: 1,life: Math.round(Math.random() * range / 2) + range / 1.5}text.base = {life: text.life,size: text.size,};text.direct = (text.left - text.x) * 0.08;listText.push(text);}// play soundplayExpSound();//lights.push({x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });if (++textIndex < textString.length) {setTimeout(initText, 10);}else {textIndex = 0;}}

设置随机颜色

function randColor() {var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);var color = 'rgb($r, $g, $b)';color = color.replace('$r', r);color = color.replace('$g', g);color = color.replace('$b', b);return color;}

制作心型烟火

function makeHeartFirework(fire) {var color = randColor();var velocity = Math.random() * 3 + 3;var max = fireNumber * 5;var rotate = Math.random() * Math.PI * 2;for (var i = 0; i < max; i++) {var rad = (i * Math.PI * 2) / max + rotate;var v, p;if (rad - rotate < Math.PI * 0.5) {p = (rad - rotate) / (Math.PI * 0.5);v = velocity + velocity * p;}else if (rad - rotate > Math.PI * 0.5 && rad - rotate < Math.PI) {p = (rad - rotate - Math.PI * 0.5) / (Math.PI * 0.5);v = velocity * (2 - p);}else if (rad - rotate > Math.PI && rad - rotate < Math.PI * 1.5) {p = (rad - rotate - Math.PI) / (Math.PI * 0.5);v = velocity * (1 - p);}else if (rad - rotate > Math.PI * 1.5 && rad - rotate < Math.PI * 2) {p = (rad - rotate - Math.PI * 1.5) / (Math.PI * 0.5);v = velocity * p;}else {v = velocity;}v = v + (Math.random() - 0.5) * 0.25;var firework = {x: fire.x,y: fire.y,size: Math.random() + 1.5,fill: color,vx: Math.cos(rad) * v,vy: Math.sin(rad) * v,ay: 0.02,alpha: 1,life: Math.round(Math.random() * range / 2) + range / 1.5};firework.base = {life: firework.life,size: firework.size};listFirework.push(firework);}return color;}

点击直接资料领取

如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。

这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种资源。反正看看也不亏。