More than 1 year has passed since last update.

canvas要素で遊んでみる

Last updated at 2022-12-16Posted at 2022-12-13

canvasを使った際の備忘録です。

画像に任意の文字列を重ねて表示するサンプルです。

<html>
<head>
    <title>サンプルコード</title>
</head>
<body>
    <input type="text" id="text1" value=""><br><br>
    <input type="text" id="text2" value=""><br><br>
    <canvas id="cv" width="1000" height="1000" style="background-color:#f0f0f0"></canvas>

    <script>
        var ctx = document.getElementById('cv').getContext('2d');
        var img = new Image();
        img.src = "画像ファイル名";

        //ロード時
        window.onload = function () {
            text1.addEventListener('input', txtChanged);
            text2.addEventListener('input', txtChanged);

            //画像
            ctx.drawImage(img, 0, 0, 1000, 1000);

            //テキスト
            ctx.fillStyle = "White"
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";

            ctx.font = "bold 100px 'フォント名'";
            ctx.fillText("＊＊　＊＊", 250, 333, 500);
            ctx.fillText("＊＊　＊＊", 750, 666, 500);
        }

        //テキスト変更時
        function txtChanged() {
            //画像
            ctx.drawImage(img, 0, 0, 1000, 1000);

            //テキスト
            ctx.fillText(text1.value, 250, 333, 500);
            ctx.fillText(text2.value, 750, 666, 500);
        }
    </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up