0

キャンバスに画像をロードするコードを HTML5 で作成しました。その次のとおりです。

<html>
<head>
    <script src="jquery-1.9.1.js" ></script>
    <script>
        window.onload = function ()
        {
            var canvas1 = document.getElementById("cvs1");
            var canvas2 = document.getElementById("cvs2");
            var context1 = canvas1.getContext('2d');
            var context2 = canvas2.getContext('2d');
            var imageXY  = {x: 50, y: 50};



            // Load the image on canvas1 initially and set the state up with some defaults

            state = {}
            state.dragging     = false;
            state.canvas       = document.getElementById("cvs2");
            state.image        =  new Image();
            state.image.src    = 'pick.jpg';
            //state.image.id       = 'img1';
            state.offsetX      = 0;
            state.offsetY      = 0;

            state.image.onload = function ()
            {
                Draw();
            }


             // This draws the image to the canvas

            function Draw ()
            {
                //Clear both canvas first
                context1.clearRect(0,0,canvas1.width,canvas1.height);
                context2.clearRect(0,0,canvas2.width,canvas2.height);

                //Draw a red rectangle around the image
                if (state && state.dragging) {
                    state.canvas.getContext('2d').strokeStyle = 'red';
                    state.canvas.getContext('2d').strokeRect(imageXY.x - 2.5,
                                                             imageXY.y - 2.5,
                                                             state.image.width + 5,
                                                             state.image.height + 5);
                }

                // Now draw the image
                state.canvas.getContext('2d').drawImage(state.image, imageXY.x, imageXY.y);
            }            
        }
    </script>
    <style>
        canvas
        {
            border: 1px solid gray;
        }
    </style>

<body>

    <canvas id="cvs1" width="150" height="600" style="float: left">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="600" style="float: left; margin-left: 10px">[No canvas support]</canvas>

</body>
</html>

状態のプロパティは、前述のように設定できます。でも、この画像をJQueryでいろいろなイベントに使いたいです。「state.image.id = 'img1';」を使用してみました （コメントされています）が、機能していません。

誰かが画像のIDをキャンバス画像に動的に追加するのを手伝ってくれますか?? どうもありがとう。

4

2 に答える 2

1

申し訳ありませんが、HTML5 Canvas に何かを描画している場合、座標に応じて描画されているだけです。作成されるのは DOM 要素ではないため、ID を指定することはできません。ID は要素にのみ付与できます。

于 2013-07-23T10:39:34.767 に答える
0

あなたのサンプル コードには、問題を示すものは何も含まれていないようです。

FWIW、画像が実際にDOMに接続されていない場合、画像のDOMを照会できないと思います。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
<script>
    window.onload = function ()
    {
        state = {}
        state.dragging     = false;
        state.canvas       = document.getElementById("cvs");
        state.image        =  new Image();
        state.image.src    = 'pick.jpg';
        state.image.id       = 'pickimage';

        state.image.onload = function ()
        {
            Draw();
        }

        function Draw ()
        {
            var ctx = state.canvas.getContext('2d');

            ctx.clearRect(0,0,state.canvas.width,state.canvas.height);

            // this fails
            if ( $( "#pickimage" ).length ) {
                state.canvas.getContext('2d').drawImage( $( "#pickimage" )[0], 0, 0 );
            }

            // so does this
            if ( document.getElementById("pickimage") ) {
                state.canvas.getContext('2d').drawImage( document.getElementById("pickimage"), 0, 256 );
            }

            state.canvas.appendChild( state.image );

            // but this works
            if ( $( "#pickimage" ).length ) {
                state.canvas.getContext('2d').drawImage( $( "#pickimage" )[0], 256, 0 );
            }

            // and so does this
            if ( document.getElementById("pickimage") ) {
                state.canvas.getContext('2d').drawImage( document.getElementById("pickimage"), 256, 256 );
            }

        }            
    }
</script>
<style>
    canvas
    {
        border: 1px solid gray;
    }
</style>


<canvas id="cvs" width="512" height="512" >[No canvas support]</canvas>

于 2013-07-23T15:37:13.657 に答える