4

私の問題は、ローカルでホストされている画像をキャンバスにロードする際に問題が発生することです。XAMPPを使用して、ローカルでWebサーバー上でコードをホストしようとしましたが、LightBlue.jpg画像が読み込まれないようです。ただし、Webサイトの外部画像を使用すると、コードは完全に機能します。以下に例を示します。

HTML： 

<canvas id="Section1Canvas" width="500" height="95" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

JAVASCRIPT：

<script>
    var canvas = document.getElementById('Section1Canvas'),
    context = canvas.getContext('2d');
    make_base();
    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
            context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
    }
</script>

スクリプトは、コード内の終了HTMLタグのすぐ上に表示されます。Webサーバーですべての情報をホストしましたが、画像の読み込みを拒否します。外部画像を使用してコードを次のように変更すると、キャンバスは画像を完全に読み込みます。

<script>
    var canvas = document.getElementById('Section1Canvas'),
    context = canvas.getContext('2d');
    make_base();
    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
            context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    }
</script>

任意のガイダンスをいただければ幸いです。

4

5 に答える 5

4

あなたはとても近かった！

base_image.src 関数の後に置く必要がありbase_image.onloadます：

<script>
    var canvas  = document.getElementById('Section1Canvas'),
        context = canvas.getContext('2d');
    make_base();

    function make_base()
    {
        base_image = new Image();
        base_image.onload = function()
        {
           // test that the image was loaded
           alert(base_image);  // or console.log if you prefer
           context.drawImage(base_image, 10, 10);
        }
        base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
    }
</script>
于 2013-03-07T23:17:45.487 に答える
0

function（）に}がありません。あなたはそれを開いたが、閉じるのを忘れた。

于 2014-09-17T20:58:22.263 に答える
0

XAMPPがキャンバススクリプトを処理するのを妨げる1つの機能はですmod_rewrite。これは明らかに簡単な修正です。こうやって..

1：
お気に入りのテキストエディタを使用してapacheの設定ファイルを開きます。構成ファイルは通常、次の場所にあります：{apache_dir} /conf/httpd.conf XAMPPまたはWAMPパッケージを使用している場合、ファイルは次の場所にあります：{xampp_dir} /apache/conf/httpd.conf {wamp_dir} / apache / conf /httpd.conf
2：
次の文字列を検索します：#LoadModule rewrite_module modules / mod_rewrite.soコメントを外します（「＃」記号を削除します）。
3：
次に、別の文字列AllowOverride Noneを検索し、それをAllowOverride Allに置き換えます。4
：
最後に変更を保存し、テキストエディタを閉じて、Apacheサーバーを再起動します。

それはあなたのローカルホストを正しいパラメータに設定するべきです（SHOULD）。

于 2016-06-14T21:57:32.180 に答える
0

私にとって、srcを後に置くと、状況が悪化します。これが問題です。私の場合、これは25ミリ秒ごとに更新されます。最初に2本の針（図示せず）、次にこの小さな丸いカバーが針を覆います。

針は毎回絶対に機能します-フィット感があると上部が表示されます。

  ctx.save();
  ctx.beginPath();
  ctx.translate(cX, cY);
  if (centre.complete) ctx.drawImage(centre, kn1, kn2, kn3, kn4); 
  else centre.onload = function () { ctx.drawImage(centre, kn1, kn2, kn3, kn4); } 
  ctx.restore();
于 2017-02-13T12:44:39.420 に答える
0

drawImage関数を呼び出すときにも、画像の幅と高さを指定します。

context.drawImage(img, x, y, width, height);
于 2022-01-16T07:17:45.657 に答える