今日は、編集者が Web フロントエンド特殊効果コレクション シリーズの第 13 号を紹介します。クールなエフェクトで遊ぶのが好きな友人は、ぜひご覧ください。
HTML5 キャンバスを使用して形成された、非常にクールなウォーターフォール フロー テキスト エフェクトを共有しましょう。関連するコードは次のとおりです。
<!doctype html><html lang=ja><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ パディング: 0; マージン: 0;}ボディ{ 背景:#000 ;} </style></head><body> <div id=container> <canvas id=c></canvas></div><script type=text/javascript src=http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js></script><script> var c = document.getElementById(c);var ctx = c.getContext(2d) ;//全画面にする c.height = window.innerHeight;c.width = window.innerWidth;//Unicode 文字セットの中国語文字 var chinese = igeekbar~;//文字列を配列内の単一の文字に変換します chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //rain の列数//数値各列の列の配列 var Drops = []; // 以下は x 座標です // 1 = y のドロップ (最初は同じ) for(var x = 0; x < columns; x++) Drops[x] = 1 ; //描画関数draw(){ //黒BGキャンバス //半透明BG表示トラック ctx.fillStyle = rgba(0, 0, 0, ctx.fillRect(0, 0, c.width, c. height); ctx.fillStyle = #0F0; //フォントの色 ctx.font = font_size + px arial; // ループフォント for(var i = 0; i < Drops.length; i++) { //ランダムな中国語文字を出力します var text = chinese[Math.floor(Math.random()*chinese.length)] //x = i*font_size, y =drops[i] の値* font_size ctx.fillText(text, i*font_size, Drops[i]*font_size); // 画面上に線を描いた後、ランダムに一番上に送ります // ドロップが軸を横切って散らばるようにリセットにランダム性を追加します if(drops[i]*font_size > c.height && Math.random( ) > 0.975)drops[i] = 0; //Y 座標を増加しますdrops[i]++ }}setInterval(draw, 33);</script></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。