首页 > 代码库 > html5式程序猿表白
html5式程序猿表白
今天是个好日子,2014年5月20日,表白的最佳时机,虽说孩子已经四岁、结婚已经五年,但是也不可以偷懒,于是有了这个效果。
在线研究点这里,下载收藏点这里。程序猿and程序媛,大胆秀出你的爱吧。
利用html5 canvas实现动态的文字粒子效果,效果如下。
OK,简单看看原理,首先我们需要在canvas里面实现描边文字,然后利用getImageData获得描边文字的像素矩阵,将粒子效果绑定在描边文章上。
整个效果如下。
html文件非常简单。
<canvas id="canvas" width="1000" height="600"></canvas>css文件如下。
body { background: #000; text-align: center; font-family: "simhei" } canvas { margin: auto; position: absolute; left: 0; right:0; top: 0; bottom: 0; }js文件至关重要了。
BLUR = false; PULSATION = true; PULSATION_PERIOD = 1000; PARTICLE_RADIUS = 1; /* disable blur before using blink */ BLINK = false; GLOBAL_PULSATION = false; QUALITY = 2; /* 0 - 5 */ /* set false if you prefer rectangles */ ARC = true; /* trembling + blur = fun */ TREMBLING = 0; /* 0 - infinity */ FANCY_FONT = "Arial"; BACKGROUND = "#000"; BLENDING = true; /* if empty the text will be a random number */ var TEXT; num = 0; TEXTArray = ["Whq", "Love", "Xcl", "Ever"]; QUALITY_TO_FONT_SIZE = [10, 12, 30, 50, 200, 350]; QUALITY_TO_SCALE = [20, 6, 4, 1, 0.9, 0.5]; QUALITY_TO_TEXT_POS = [10, 20, 40, 60, 170, 280]; window.onload = function () { document.body.style.backgroundColor = BACKGROUND; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var W = canvas.width; var H = canvas.height; var tcanvas = document.createElement("canvas"); var tctx = tcanvas.getContext("2d"); tcanvas.width = W; tcanvas.height = H; total_area = W * H; total_particles = 1000; single_particle_area = total_area / total_particles; area_length = Math.sqrt(single_particle_area); var particles = []; for (var i = 1; i <= total_particles; i++) { particles.push(new particle(i)); } function particle(i) { this.r = Math.round(Math.random() * 255 | 0); this.g = Math.round(Math.random() * 255 | 0); this.b = Math.round(Math.random() * 255 | 0); this.alpha = 1; this.x = (i * area_length) % W; this.y = (i * area_length) / W * area_length; /* randomize delta to make particles sparkling */ this.deltaOffset = Math.random() * PULSATION_PERIOD | 0; this.radius = 0.1 + Math.random() * 2; } var positions = []; function new_positions() { TEXT = TEXTArray[num]; if (num < TEXTArray.length - 1) { num++; } else { num = 0; } //alert(TEXT); tctx.fillStyle = "white"; tctx.fillRect(0, 0, W, H) tctx.fill(); tctx.font = "bold " + QUALITY_TO_FONT_SIZE[QUALITY] + "px " + FANCY_FONT; tctx.strokeStyle = "black"; tctx.fillStyle="#f00"; tctx.strokeText(TEXT,30, 50); //tctx.fillText(TEXT,30, 50); image_data = http://www.mamicode.com/tctx.getImageData(0, 0, W, H);>----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。