ホームページ  >  記事  >  ウェブフロントエンド  >  H5 キャンバスを使用して弾幕効果を作成する

H5 キャンバスを使用して弾幕効果を作成する

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-13 16:35:344125ブラウズ

今回は、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. テキストがキャンバスを超えるタイミングを計算し、弾幕リストの外に移動します

コード

//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);
    })
})();

H5 キャンバスを使用して弾幕効果を作成する この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンド開発におけるSVGアニメーション


キャンバスを使用して黒い背景と特殊効果を持つ破片花火を作成する方法

以上がH5 キャンバスを使用して弾幕効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。