H5キャンバスを使ってホラーアニメーションを作る

今回はH5キャンバスを使ってホラーアニメーションを作る方法を紹介します。 H5キャンバスを使ってホラーアニメーションを作る際の注意点は何ですか？

キャンバスでは、興味深い効果やアニメーションを実現できます。簡単なページ実装を使用して基本的な描画方法を学びます。

効果

ハッピーハロウィン

予備知識

let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');

開始パス

context.beginPath();

beginPath() メソッドは、キャンバス上で描画パスを開始するか、現在のパスをリセットします。

パスの移動

context.moveTo();

moveTo() メソッドは、線を作成せずに、パスをキャンバス内の指定された点に移動します。

ラインの追加

context.lineTo();

lineTo()メソッドは、新しいポイントを追加し、そのポイントからキャンバス内の指定されたポイントまでラインを作成します。

drawImage

context.drawImage(image,x,y);

drawImage() メソッドは、キャンバス上に画像、キャンバス、またはビデオを描画したり、画像の一部を描画して画像のサイズを拡大/縮小したりできます。

ピクセルデータの取得

context.getImageData(x,y,width,height);

getImageData() メソッドは、四角形のピクセル データを指定するキャンバス imageData オブジェクトを取得できます。

imageData オブジェクトには、各ピクセルの rgba 値があり、配列の形式で data 属性に保存されます。

ピクセルデータを戻す

context.putImageData(imageData,x,y);

putImageData()メソッドは、取得した画像データをキャンバスに戻します。

実装

html

<canvas id="canvas"></canvas><button id="click" class="switch">Click</button>

css

html,body,canvas {    width: 100%;    height: 100%;    margin: 0;
}.switch {    position: absolute;    top: 70%;    right: 10%;    width: 50px;    height: 50px;    border-radius: 50px;    outline: none;    cursor: pointer;    animation: switch-animate alternate infinite ease 1s 0s;
}
@keyframes switch-animate {    from {        box-shadow: 0 0 30px #ece9c5;
    }    to {        box-shadow: 0 0 100px #eae5a7;
    }
}

js

(function () {    class Halloween {        constructor(id) {            this.canvas = document.getElementById(id);            this.ctx = this.canvas.getContext('2d');            this.w = this.canvas.width;            this.h = this.canvas.height;            this.data = [];
        }        //初始画布
        initDraw(img) {            this.w = this.canvas.width = img.width;            this.h = this.canvas.height = img.height;            this.ctx.drawImage(img, 0, 0);            this.data = this.ctx.getImageData(0, 0, this.w, this.h);
        }        //显示文字
        drawText() {            this.ctx.font = '60px Verdana';            this.ctx.fillStyle = '#ffffff';            this.ctx.fillText('万圣节快乐', 350, 280);
        }        //闪电
        lightning() {            let ctx = this.ctx;
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(800, 10);
            ctx.lineTo(600, 100);
            ctx.lineTo(500, 200);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(600, 100);
            ctx.lineTo(650, 170);
            ctx.stroke()
        }        //打雷
        thunder() {            let timer = Math.floor(800 * Math.random());            this.reverse();            this.lightning();            this.drawText();
            setTimeout(() => {                this.reset();
            }, timer);
        }        //反转画布
        reverse() {            let imgData = this.ctx.getImageData(0, 0, this.w, this.h);            for (var i = 0, len = imgData.data.length; i < len; i += 4) {
                imgData.data[i] = 255 - imgData.data[i];
                imgData.data[i + 1] = 255 - imgData.data[i + 1];
                imgData.data[i + 2] = 255 - imgData.data[i + 2];
                imgData.data[i + 3] = 255;
            }            this.ctx.putImageData(imgData, 0, 0);
        }        //重置画布
        reset() {            this.ctx.putImageData(this.data, 0, 0);
        }
    }    let halloween = new Halloween(&#39;canvas&#39;);    let canvas = document.getElementById(&#39;canvas&#39;);    let ctx = canvas.getContext(&#39;2d&#39;);    let img = new Image();
    img.src = &#39;/images/halloween.png&#39;;
    img.onload = () => {
        halloween.initDraw(img);
    }    document.getElementById(&#39;click&#39;).onclick = () => {
        halloween.thunder();
    }
})();

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらにエキサイティングなコンテンツについては、php Chineseに注目してください。ウェブサイト

その他の関連記事!

推奨読書:

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

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

以上がH5キャンバスを使ってホラーアニメーションを作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。