1

所需的行为是当文档加载时，画布绘制图像 0。当单击不可见的 div 时，画布绘制图像 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 回答