최근에, 당신은 큰 숙제를 할 때 사격 선수를 만들어야합니다. 나는 다른 사람의 소스 코드를 기억하고 다시 알 수 있으며, 시연은 다음과 같습니다.
주요 기능은입니다선박
사격의 색상, 속도 및 유형을 설정하십시오
전시를 표시합니다
알려진 결함 :전체 화면이 없습니다
캔버스는 적응에 적응하지 않습니다
맞춤형 플레이어 컨트롤이 없습니다
해당 사격은 재생 시간에 따라 표시되지 않습니다.
사격은 중단 될 수 없습니다
알려진 결함이 향후 개선 될 것입니다. 인터넷에서 찾을 수있는 사격 플레이어의 소스 코드는 일반적으로 정적 사격 없이만 롤링 사격을 만듭니다.
캔버스는 텍스트와 텍스트 롤링 효과를 그립니다전체 플레이어의 핵심은 텍스트 롤링 애니메이션을 만드는 것입니다.
먼저 HTML 파일에서 비디오 태그 및 캔버스 케이블 추가
<div id = barrageplayer> <canvas id = cv_video width = 900px 높이 = 450px> </canvas> <비디오 id = v_video src = test.mp4 controls = video/mp4>/video> </div
캔버스 태그의 위치 스타일을 긍정적으로 설정 한 다음 비디오와 캔버스가 겹치게됩니다. 그런 다음 캔버스에 사격의 내용을 추가하고 캔버스의 관련 정보를 얻고 캔버스의 글꼴 크기와 글꼴 스타일을 설정하십시오.
var c = getElementById (cv_video); 캔버스 정보가 얻어졌으며, 쌀이 없어도 쌀을 요리하기가 어렵습니다. , spey) {content.color = this. this.speed; if (this.type == static top) {this.head = parseint ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == static ttom) {this .Height = parseint ((C_Height/2) +Math.random ()*C_Height/2) +10;} if (type this.move! = function) {barrage.prototype.move () {if. type == default) {this.left = this.left-this.speed;}}}}}구성된 사격 객체는 내용, 색상, 이동 유형 및 속도를 포함한 다양한 매개 변수를 초기화하여 Move () 메소드를 정의하여 사격의 움직임을 제어합니다. 왼쪽에 왼쪽 방법. 에센스
방사 객체의 생성자가 완료되면 테마가 입력되고 코드에서 직접 애니메이션 제작
// 애니메이션 효과 SetInterval (function () {ctx.clearRect (0,0, C_Width, C_Height); ctx.save (); for (var i = 0; i + 길이; i +; +) {) {) {if (msgs [i]! = null) {if (msgs [i] .type == default) {handledefault (msgs [i]);} else {handlestate (msgs [i]); }}}}, 20)20ms마다 ctx.clearrct (0,0, c_width, c_height)를 실행 한 다음 Ctx.save ()로 현재 캔버스를 저장 한 다음 사격 목록을 통과했습니다 (MSGS는 MSG가 사격 목록, 사격이 전송되면 사격 인스턴스가 목록에 추가 된 다음 기본 스타일의 사격 또는 정적 스타일에 따라 별도로 처리됩니다. 기본 스타일의 사격 인 경우 다음 방법에 따라 처리됩니다.
// 기본 사격 스타일 함수 처리 핸들러 프 (Barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else (barrag e.left <-200). {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color (barrage.content, parrage.left, barrage.head);}}});우선, 사격 인스턴스가 왼쪽 속성을 설정하지 않으면 캔버스의 너비가 주어지면 캔버스로 내보내면 메모리를 저장하도록 설정됩니다. 왼쪽 속성의 값을 변경하려면 사격 인스턴스의 텍스트 색상을 설정하고 첫 번째 레벨에서 새 텍스트를 작성한 다음 캔버스를 복원하십시오. 이것은 애니메이션 프레임을 완성합니다.
정적 사격의 구현 방법은 다음과 같습니다
// 정적 사격 스타일 기능 (Barrage) {CTX.Moveto (C_Width/2, Height); 2. Barrage.Height); if (Barrage.left == 정의되지 않은 || Barrage.left == null) {Barrage.left = c.width;} else {if (barrage.left <-200) {ctx.fillte xt (XT (, C_WIDTH/2, BARRAGE.HEIGHT); BARRAGE = NULL; // CTX. Store (); CTX.CTX.CLEARRECT (0,0, C_WIDTH, C_HEIGHT);} else {Barrage.left = Barrage.left-6 ;}}}우선, 캔버스의 기본 점은 캔버스의 중심으로 이동합니다. 이 캔버스에. 그런 다음 텍스트 정렬을 중간 정렬로 설정하고 텍스트 스타일을 설정 한 다음 텍스트를 채우십시오. 사격은 정적이므로 속도가 느려질 필요는 없지만 정적 사망이 사라지게됩니다. 여기에서 추가 속성을 차지하지 않기 위해 왼쪽 속성을 로고 위치로 직접 사용하여 왼쪽 속성을 줄입니다. 이런 식으로, 정적 사격의 처리가 실현된다.
색상과 스타일 설정에 대한 특정 기초를 가진 다른 사람들은 마스터하기 쉽고 여기에서 실행중인 코드를보고 이해하지 못합니다.
요약이 프로젝트는 주로 텍스트 그리기에 캔버스를 사용하고 텍스트의 느린 애니메이션을 사용합니다
canvasdom.getConotext () canvas.save () /canvas.restore () canvas.clearRect () canvas.moveto ()
Save ()와 복원 ()로 이해할 수 없다는 것이 밝혀졌습니다. 캔버스 상태를 수정하기 전에 캔버스 상태를 전환하고 작업이 완료된 후에도 계속 작동합니다. 정적 사격을 처리 할 때 캔버스의 기본 점이 변경되었으므로 원래 캔버스의 클리어런스 방법은 더 이상 현재 캔버스에만 적용되지 않습니다. 그런 다음 원래 캔버스로 돌아갑니다.
실행 코드
<!! <! UAA -Compative Content = IE = Edge> <title> 문서 </title> </head> <텍스트/CSS>. 인라인-블랙;} #화이트 {배경 : 흰색;} #red {배경 : #ff6666;} #yellow {배경 : #ffff00;} #blue { #333399;} #green {배경 : #339933;} #cv_video { 절대; ;} </style> <hod> <div id = barrageplayer> <mvas id = cv_video 너비 = 900px 높이 = 450px> </canvas> <video id = v_video src = test .mp4 컨트롤 = 비디오/mp4> </ 비디오> </div> <div id = barrageInput> <div> <입력 유형 = 텍스트 ID = SMSG 자리 표시 자 = 배지 내용을 입력하십시오/> <버튼 id = send> </button> </div> <div id = colorpick> <div class = pickdiv id = white> </div> <div class = pickdiv id = red> </div> <div class = pickdiv id = 옐로우> </div> </div> div class = pickdiv id = blue> </div> <div class = pickdiv id = green> </div> </div> <div id = typepick> <입력 유형 = 무선 이름 = type = defaul t> 기본적으로 <입력 유형 = 무선 이름 = 유형 값 = 정적 상단> 정적 상단 <입력 유형 = 무선 이름 = 유형 값 = 정적 하단> 정적 하단 </div> <div id = speedpick> <입력 유형 = 무선 이름 = 속도 값 = 1> 1x <입력 유형 = 라디오 이름 = 속도 값 = 2> 2x <입력 유형 = 무선 이름 = 속도 값 = 3x </div> <div id = stylepick> </div> <cript> var c = document.getElementById (cv_video); var typedom.getElementsByName = getElementsByName (speed); var type = var c_height = c.width; addeventristener (click) {event.target.id. #339933; 길이; ifedom [i]. speeddom [i]. Checked) {Speeddom [i]. ;} // 사격 부분의 함수 // // 컨텐츠, 색상, 유형, 속도) {content.color = color; = 속도; if (thistype == default) {this.height = paraseint (math.random ()*c_hei ght) +10;} else if (this.type == static top) parseint ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == 정적 하단) {th is .height = parseint ((c_height/2) +math.random (. 속도;}}} // 애니메이션 효과 SetInterval의 캔버스; null) {if (msgs [i] .type == default) {handledefault (msgs [msgs [i]);} else {handlestatic (msgs [i]);}}}, 20) // 기본 사격 스타일을 처리합니다. 함수 handledefault (Barrage) {if (parrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else {if (barrage.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color; {CTX.MOVETO (C_WIDTH/2, HEIGHT); 왼쪽 = || = null; /ctx.restore ();} else {barrage.left = barrage.left-6;}} </script> </body> </html>위는 캔버스를 사용하여 모든 사람에게 도움이되기를 바랍니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!