1

私はjavascriptはまったく初めてですが、プログラミングは初めてです...私の人生では、これを理解できません。キャンバスに画像を描画しようとしています。描画する長方形を取得できますが、画像は取得できません。

これが私のコードです：

<head>
    <meta http-equiv = "Content-type" content = "text/html;charset=utf-8">
    <meta name = "viewport" id = "viewport" content = "width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
    <script type = "text/javascript">
        function drawPic()
        {
            ////////////// DOESN'T WORK /////////////////// 
            var canvas = document.getElementById('mainCanvas');
            if (canvas.getContext)
            {
                var context = canvas.getContext('2d');
                var img = new Image();
                img.onload = function ()
                {
                    canvas.drawImage(img, 0, 0);
                };
                img.src = "pic1.jpg";
            }


            ///////////////////////////////////////////////////////////////
            ///////////// WORKS //////////////////////////////////////////
            if (canvas.getContext)
            {
                var context = canvas.getContext('2d');
                context.fillStyle = "rgb(150,29,28)";
                context.fillRect(2, 2, 96, 96);
            }
        }
    </script>
</head>
<body onload = "drawPic();">
    <canvas id = "mainCanvas"></canvas>
</body>
4

2 に答える 2

2

代わりにcanvas.drawImage(img, 0, 0);それを呼び出す必要がありますcontext- context.drawImage(img, 0, 0);。それが役に立てば幸い ：）

于 2012-09-14T04:25:47.417 に答える
0

AJAX呼び出しを行う必要があります。

次のようなものをコードに追加すると、画像が読み込まれます。

window.onload = function() {
        // make ajax call to get image data url
        var request = new XMLHttpRequest();
        request.open("GET", "http://www.html5canvastutorials.com/demos/assets/dataURL.txt", true);
        request.onreadystatechange = function() {
          // Makes sure the document is ready to parse.
          if(request.readyState == 4) {
            // Makes sure it's found the file.
            if(request.status == 200) {
              loadCanvas(request.responseText);
            }
          }
        };
        request.send(null);
      };

完全な例については、このチュートリアルを参照してください：http ://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/

于 2012-09-14T04:20:53.857 に答える