집 > 기사 > 웹 프론트엔드 > HTML이 캔버스를 사용하여 사격 기능을 구현하는 방법

HTML이 캔버스를 사용하여 사격 기능을 구현하는 방법

墨辰丷원래의: 2018-06-04 15:00:471991검색

이 글은 주로 HTML이 캔버스를 사용하여 사격 기능을 구현하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

소개

최근 큰 일을 하다보니 탄막선수를 만들어야 했습니다. 다른 사람의 소스 코드를 빌려서 직접 다시 구현했습니다. 시연은 다음과 같습니다.

주요 기능은

탄 사격의 색상, 속도 및 유형 설정
탄 사격 표시

알려진 결함:

전체 화면이 될 수 없습니다

캔버스가 적응형이 아닙니다.

사용자 정의 플레이어 컨트롤이 없습니다.
재생 시간에 따라 해당 탄막이 표시되지 않습니다.
탄막을 호버할 수 없습니다.
알려진 결함은 향후에 해결될 예정입니다. . 인터넷에서 찾을 수 있는 사격 플레이어의 소스 코드는 일반적으로 정적 사격이 아닌 롤링 사격만 수행합니다. 여기에는 특별히 정적 사격의 구현을 추가했습니다.

캔버스는 텍스트를 그리고 텍스트 스크롤 효과를 냅니다

전체 플레이어의 핵심은 텍스트를 그리고 텍스트 스크롤에 애니메이션을 적용하는 것입니다. 캔버스의 텍스트에 대한 좋은 애니메이션 지원은 없으며 사용자가 직접 구현할 수 있습니다. 화면 지우기 및 다시 쓰기 빈도가 24fps에 도달하면 애니메이션이 매끄러워집니다.

먼저 HTML 파일에 비디오 비디오 태그와 캔버스 태그를 추가하세요

<p id="barrageplayer">
    <canvas id="cv_video" width="900px" height="450px"></canvas>
    <video id="v_video" src="test.MP4" controls type="video/mp4"></video>
</p>

캔버스 태그의 위치 스타일을 position:absolute로 설정하면 비디오와 캔버스가 겹쳐서 포격처럼 보일 것입니다 플레이어 . 그런 다음 캔버스에 탄막 관련 콘텐츠를 추가합니다. 먼저 캔버스의 관련 정보를 얻고 캔버스의 글꼴 크기와 글꼴 스타일을 설정합니다. 색상, 모션 유형 및 속도 move() 메소드는 탄막의 완화를 제어하기 위해 정의됩니다. move() 메소드가 실행될 때마다 단위 속도를 1픽셀씩 왼쪽으로 스크롤합니다.

탄막객체 구축이 완료되면 테마와 애니메이션 제작을 직접 입력하고 코드를 직접 입력하세요

var c=document.getElementById("cv_video");
//获取画布大小
var c_height=c.height;
var c_width=c.width;
//获取画布
ctx=c.getContext("2d");
//设置字体样式
ctx.font="25px DengXian";
画布信息已经获取和设置，巧妇难为无米之炊，接着我们就要构造弹幕对象，使用的构造模式是动态原型模式
//弹幕对象
function Barrage(content,color,type,speed){
    this.content=content;
    this.color=color;
    this.type=type;
    this.speed=speed;
    if(this.type=="default"){
        this.height=parseInt(Math.random()*c_height)+10;
    }else if (this.type=="static top"){
        this.height=parseInt((c_height/2)-Math.random()*c_height/2)+10;
    }else if (this.type=="static bottom"){
        this.height=parseInt((c_height/2)+Math.random()*c_height/2)+10;
    }
    if(typeof this.move!="function"){
        Barrage.prototype.move=function(){
            if(this.type=="default"){
                this.left=this.left-this.speed;
            }
        }
    }
}

20ms마다 삭제를 실행하면 ctx.clearRect(0,0,c_width,c_height); 전체 그림 현재 캔버스를 지운 다음 ctx.save()를 사용하여 현재 캔버스를 저장한 다음 사격 목록을 순회합니다(msgs는 사격 목록이며 사격이 전송될 때마다 사격 인스턴스가 목록에 추가됩니다) , 그런 다음 기본 포격 스타일과 정적 포격 스타일이 별도로 처리됩니다. 기본 스타일의 탄막이라면 다음과 같은 방법으로 처리됩니다

//循环擦写画布实现动画效果
setInterval(function(){
    ctx.clearRect(0,0,c_width,c_height);
    ctx.save();
    for(var i=0;i<msgs.length;i++){
        if(msgs[i]!=null){
            if(msgs[i].type=="default"){
                handleDefault(msgs[i]);
            }else{
                handleStatic(msgs[i]);
           }
        }
    }
},20)

먼저 탄막 인스턴스에 왼쪽 속성이 설정되어 있지 않으면 캔버스의 너비를 지정합니다. 사격 인스턴스가 캔버스를 종료하면 메모리를 절약하기 위해 null을 설정합니다. 그렇지 않으면 사격 인스턴스의 move() 메서드를 호출하여 왼쪽 속성의 값을 변경한 다음 텍스트 색상을 설정하고 새 텍스트를 씁니다. 첫 번째 레벨로 이동하고 캔버스를 복원합니다. 이로써 애니메이션의 한 프레임이 완성됩니다.

Static Barrage 구현 방법은 다음과 같습니다

//处理默认弹幕样式
function handleDefault(barrage){
    if(barrage.left==undefined||barrage.left==null){
        barrage.left=c.width;
    }else{
         if(barrage.left<-200){
            barrage=null;
        }else{
            barrage.move()
            ctx.fillStyle=barrage.color;
            ctx.fillText(barrage.content,barrage.left,barrage.height)
            ctx.restore();
        }
    }  
}

먼저 캔버스의 기준점을 캔버스 중앙으로 이동시킵니다. 이때 새로운 캔버스가 생성됩니다. () 원본 캔버스의 방법은 더 이상 이 캔버스에 적용할 수 없습니다. 그런 다음 텍스트 정렬을 가운데 정렬로 설정하고 텍스트 스타일을 설정한 후 텍스트를 채웁니다. 탄막은 정적이므로 완화할 필요는 없지만, 정적 탄막도 정기적으로 사라지도록 플래그를 설정해야 합니다. 여기서 추가 속성을 차지하지 않기 위해 left 속성을 플래그로 직접 사용합니다. 또한 left 속성을 감소시키지만 left가 임계값에 도달하면 ctx.clearRect() 메서드를 사용합니다. 사격을 취소합니다. 이러한 방식으로 정적 사격 처리가 실현됩니다.

색이나 스타일 설정에 있어 어느 정도 기초가 있으신 분들은 쉽게 익힐 수 있을 텐데요. 여기서는 자세히 소개하지 않겠습니다. 그냥 실행 가능한 코드 부분만 보고 이해하시면 됩니다.

요약

이 프로젝트에서는 주로 텍스트 그리기 및 텍스트 완화 애니메이션에 캔버스를 사용합니다. 사용된 주요 방법은

//处理静止弹幕样式
function handleStatic(barrage){
    ctx.moveTo(c_width/2,barrage.height);
    ctx.textAlign="center";
    ctx.fillStyle=barrage.color;
    ctx.fillText(barrage.content,c_width/2,barrage.height);
    if(barrage.left==undefined||barrage.left==null){
        barrage.left=c.width;
    }else{
        if(barrage.left<-200){
            ctx.fillText("",c_width/2,barrage.height);                
            barrage=null;
            //ctx.restore();
            ctx.clearRect(0,0,c_width,c_height);        
        }else{
            barrage.left=barrage.left-6;
        }
    }
}

제가 save() 및 복원에 대한 경험이 많은 것으로 나타났습니다. ( ) 이제 조금 이해가 되네요. 캔버스 상태를 변경하면 현재 캔버스는 더 이상 원본 캔버스가 아니므로 캔버스 상태를 수정하기 전에 캔버스 상태를 저장하고 캔버스 상태를 전환한 후 작업을 완료하세요. . , 원래 캔버스 상태로 돌아가서 작업을 계속합니다. 예를 들어 정적 포격을 처리하고 캔버스의 기준점을 변경하면 원래 캔버스 지우기 방법은 더 이상 현재 캔버스에 적용되지 않으며 현재 캔버스에서는 다른 지우기 방법만 사용할 수 있습니다. 그런 다음 원래 캔버스로 돌아갑니다.

실행 가능한 코드

canvasDom.getContext()
canvas.save()/canvas.restore()
canvas.clearRect()
canvas.moveTo()

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

HTML이 캔버스를 사용하여 사격 기능을 구현하는 방법

관련 기사