21

現在、要素を使用してすべての背景を描画することをテストしてい<canvas>ます（後でこれらの画像に効果を追加します。これが、画像の読み込みにCSSを使用しない理由です）。とはいえ、現在、キャンバスに画像をロードするのに問題があります。コードは次のとおりです。

<html>    
<head>    
    <title>Canvas image testing</title>
    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';
                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);
                };
            }                
        }
    </script>
    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>
<body onload="Test1();">    
    <canvas id="canvas" width="1280" height="720"></canvas>      
</body>
</html>

画像が正しく読み込まれていないと思いますが、よくわかりません。

4

5 に答える 5

29

いくつかあります：

  1. drawimageあるべきですdrawImage- 大文字の i に注意してください。
  2. の IDgetElementByIdを持つ要素を探していますがcanvas、それは である必要がありますtest1。canvasIDではなくタグです。
  3. キャンバス要素を選択するために使用した変数であるため、canvas変数 (たとえば、canvas.getContext行内) をに置き換えます。ctx
  4. onload画像の を設定する前に、ハンドラーをバインドしますsrc。

したがって、関数は次のようになります。

function Test1() {
    var ctx = document.getElementById('test1');
    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        //Loading of the home test image - img1
        var img1 = new Image();

        //drawing of the test image - img1
        img1.onload = function () {
            //draw background image
            ctx.drawImage(img1, 0, 0);
            //draw a box over the top
            ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 500, 500);

        };

        img1.src = 'img/Home.jpg';
    }
}
于 2013-02-07T18:05:14.647 に答える
26

新しい JavaScript 機能の使用:

let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);

関数は次のようになりloadImageます。

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}
于 2017-06-22T08:36:06.830 に答える
7

画像の src を設定する前に、onload イベント リスナーを移動します。

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
        //draw background image
        ctx.drawImage(img1, 0, 0);
        //draw a box over the top
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
        ctx.fillRect(0, 0, 500, 500);

    };

    img1.src = 'img/Home.jpg';
于 2013-02-07T18:07:42.577 に答える