Сегодня редактор поделится с вами тринадцатым выпуском серии сборников спецэффектов для веб-интерфейса. Друзья, которые любят поиграть с крутыми эффектами, пожалуйста, посмотрите ^_^ Надеюсь, вам всем понравится~
Позвольте мне поделиться с вами текстовым эффектом водопадного потока, созданным с использованием холста HTML5, и это очень круто! Соответствующий код выглядит следующим образом:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ отступ: 0; поля: 0;}body{background:#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;//Китайские символы из набора символов Юникода var chinese = igeekbar~;//Преобразуем строку в один символ в массиве chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //Количество столбцов в дожде//Число столбцов в каждом столбце массив var drop = []; // Ниже приведены координаты x // 1 = y в drop (изначально одинаково) for(var x = 0; x < columns; x++) drop[x] = 1 ; // Функция рисования draw() { // Черный холст // Полупрозрачная дорожка отображения фона 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 < drop.length; i++) { //Печать случайных китайских символов var text = chinese[Math.floor(Math.random()*chinese.length)]; //x = i*font_size, y = значение drop[i]; * font_size ctx.fillText(text, i*font_size, drop[i]*font_size); //После рисования линии на экране отправляем ее случайным образом вверх //Добавляем случайность в сброс, чтобы капли были разбросаны по оси if(drops[i]*font_size > c.height && Math.random( ) > 0,975) drop[i] = 0; //Увеличено значение координаты Y drop[i]++; }}setInterval(draw, 33);</script></body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.