오늘은 편집자가 웹프런트엔드 특수효과 컬렉션 시리즈 13호를 전해드리겠습니다. 멋진 효과를 즐기고 싶은 친구들은 꼭 들러보세요 ^_^.
HTML5 캔버스를 사용하여 형성된 폭포 흐름 텍스트 효과를 여러분과 공유하겠습니다. 매우 멋지네요! 관련 코드는 다음과 같습니다.
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ padding: 0; margin: 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();varfont_size = 20;var columns = c.width/font_size; //비가 내리는 열 수//숫자 배열의 각 열에 있는 열 수 var presents = []; // 아래는 x 좌표입니다. // 1 = y in drop (처음에는 동일) for(var x = 0; x < columns; x++)drops[x] = 1 ; //그리기 함수 draw(){ //검은색 BG 캔버스 // 반투명 BG 디스플레이 트랙 ctx.fillStyle = rgba(0, 0, 0, 0.05) 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 = 방울의 값[i] * 글꼴 크기 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 좌표 증가 Drop[i]++ }}setInterval(draw, 33);</script></body></html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.