H5 캔버스를 사용하여 사격 효과 만들기

이번에는 H5 캔버스를 사용하여 사격 효과를 만드는 방법을 소개하겠습니다. H5 캔버스를 사용하여 사격 효과를 만드는 주의 사항은 무엇입니까? 아래는 실제 사례입니다.

캔버스 지식

텍스트 그리기

let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');ctx.font = '20px Microsoft YaHei';          //字体、大小ctx.fillStyle = '#000000';                  //字体颜色ctx.fillText('canvas 绘制文字', 100, 100);   //文本，字体x,y坐标

텍스트 너비

ctx.measureText('文本宽度').width

그림 내용 지우기

ctx.clearRect(0, 0, width, height);

구현 단계

1 절대 위치 지정비디오에 오버레이를 사용하여 캔버스요소 만들기2. 사격 목록에 사격을 캐시하고 해당 사격 정보를 기록합니다
3. 사격 텍스트를 그리고 텍스트 오프셋을 사용하여 이동 속도를 제어합니다
4. 텍스트가 캔버스를 초과하는 시점을 계산하여 사격 목록 밖으로 이동합니다

Code

//html<div>
    <video>
        <source></source>
        <source></source> 
        Your browser does not support the video tag.
    </video>
    <canvas>
        您的浏览器不支持canvas标签。
    </canvas>
</div>//js(function () {    class Barrage {
        constructor(canvas) {
            this.canvas = document.getElementById(canvas);
            let rect = this.canvas.getBoundingClientRect();
            this.w = rect.right - rect.left;
            this.h = rect.bottom - rect.top;
            this.ctx = this.canvas.getContext('2d');
            this.ctx.font = '20px Microsoft YaHei';
            this.barrageList = [];
        }        //添加弹幕列表
        shoot(value) {
            let top = this.getTop();
            let color = this.getColor();
            let offset = this.getOffset();
            let width = Math.ceil(this.ctx.measureText(value).width);
            let barrage = {
                value: value,
                top: top,
                left: this.w,
                color: color,
                offset: offset,
                width: width
            }
            this.barrageList.push(barrage);
        }        //开始绘制
        draw() {            if (this.barrageList.length) {
                this.ctx.clearRect(0, 0, this.w, this.h);                for (let i = 0; i  {
        barrage.shoot(t);
    })
})();

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

프런트 엔드 개발의 SVG 애니메이션

캔버스를 사용하여 검은 배경과 특수 효과로 파편 불꽃놀이를 만드는 방법

위 내용은 H5 캔버스를 사용하여 사격 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!