1

望ましい動作は、ドキュメントが読み込まれたとき、canvasが画像0を描画することです。非表示のdivがクリックされると、canvasは画像1を描画し、mouseupまたはmouseoutで画像0に戻ります。

私はそれが機能するようになったのでcssを省略しました...javascript関数で何が間違っているのかを知る必要があります。現在、最初の画像も含めて何も表示されていません。

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
        function imgChange(imagePath)
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=new Image();
            img.onload = function(){
            ctx.drawImage(img,0,0);
            };
            img.src=imagePath; <!-- I THINK THIS IS WRONG?
        </script>
    </head>

    <body>

            <canvas id="myCanvas" width="506" height="319"
onload="imgChange('0.gif')" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
            </canvas>



            <div id="button1" onMouseDown="imgChange('1.gif')" onMouseUp="imgChange('0.gif')" onMouseOut="imgChange('0.gif')"></div>
            <div id="key2"></div>




    </body>

</html>
4

2 に答える 2

3

コードに終了ブロックがありません

function imgChange(imagePath) {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            var img=new Image();
            img.onload = function(){
                  ctx.drawImage(img,0,0);
            };
            img.src=imagePath;
}

最後の「}」がありません

于 2012-05-26T03:07:12.717 に答える
0

JavaScript は良さそうです。しかし、目に見えない をクリックdivすることはできません。div を表示して試してみてください。

同一生成元ポリシーにも注意してください。画像パスはドメイン内にある必要があります。localhost で実行している場合は、ローカル HTTP サーバーが必要になる場合があります。

于 2012-05-26T02:57:14.877 に答える